`
nbkangta
  • 浏览: 424920 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

阻止JavaScript的冒泡行为

阅读更多
$(function(){

  $('li:has(ul)')   

    .click(function(event){   

      if (this == event.target) {

        if ($(this).children().is(':hidden')) {   

          $(this)

            .css('list-style-image','url(minus.gif)')

            .children().show();

        } else {

          $(this)

            .css('list-style-image','url(plus.gif)')

            .children().hide();

        }

      }

      return false;   

    })

    .css('cursor','pointer')   

    .click();                       

  $('li:not(:has(ul))').css({   

    cursor: 'default',

    'list-style-image':'none'

  });

});

if (this == event.target) {}

这个判断保证event的target属性和this匹配。即在冒泡行为的存在下,保证this与click事件绑定的元素相匹配。避免点击子女结点触发行为 。

分享到:
评论

相关推荐

    javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation()...

    浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e....

    js阻止默认浏览器行为与冒泡行为的实现代码

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1. 阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e &&...

    JavaScript的基本教程.txt

    掌握JavaScript中的事件流,包括事件捕获、事件冒泡,以及如何阻止事件冒泡和默认行为。 三、进阶语法与特性 学习JavaScript的事件委托原理,通过事件冒泡实现父元素对子元素事件的响应。 了解并掌握JavaScript...

    js基础之事件捕获与冒泡原理

    我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些规则,浏览器按照这些规则与用户进行交互。比如开发者希望当用户点击页面...

    javascript 兼容各个浏览器的事件

    dom 事件对象 type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为 IE中的事件对象 type 属性 用于获取事件对象, srcElement属性 ...

    javascript常用函数(2)

    26、 阻止冒泡事件或阻止浏览器默认行为 27、 关闭或跳转窗口时提示 28、 用javascript获取地 址栏参数 29、 计算停留的时间 30、 div为空,只有背景时,背景自动增高  主要内容: 16、除去数组重复项 [removed]...

    JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    绑定多个事件,且由用户行为触发。如果你想细致了解JavaScript中的事件发生,请慢慢阅读。 1. 原生事件的发生顺序 一般来讲,当为一个a标签添加click事件以后,点击这个标签,会先执行绑定的事件、后跳转页面。一个...

    前端笔记.zip

    同时具有阻止冒泡和阻止默认行为的功能 事件捕获:父元素的事件会影响子元素的事件; 开启事件捕获:event.addEventListener(eventName,handler,true) 7、请说说事件委托机制?这样做有什么好处? 事件委托,...

    原创-javascript服务器交互型可编辑表格和我的js常用库

    // 阻止事件冒泡行为 stopBubble : function(ev) { // 如果传入了事件参数,则说明不是ie浏览器 if (ev && ev.stopPropagation) { ev.stopPropagaton(); } else { window.event.cancelBubble =...

    JavaScript实现事件的中断传播和行为阻止方法示例

    这种自底向上的事件传播方式称为“事件冒泡”,也就是事件传播。 如何中断事件的传播? stopPropagation() w3c取消冒泡 cancleBubble = true IE取消冒泡 取消事件默认效果: returnValue = false IE 取消事件效果...

    前端js-jshelper帮助类(全面)

    该jshelper帮助类全面涵盖了:字符串、日期时间、图片处理、请求相应、数字处理、正则匹配、对象拷贝、html处理,编码/解码、阻止事件冒泡、阻止默认行为、localStorage对象方法、复制到粘贴板、将数字转换成人民币...

    [removed].href IE下跳转失效的解决方法

    }) 代码如上,在IE下,特别是在IE6中,点击超链接之后,浏览器并没有发生跳转行为。...在onclick事件中加return false来阻止冒泡: 代码如下: $(“a”).click(function(){ [removed].href = “xxx.html”;

    利用jQuery的$.event.fix函数统一浏览器event事件处理

    在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像“阻止事件冒泡”以及“取消浏览器默认行为”等,不同浏览器也...

    web前端面试题(含答案).doc

    Web 前端面试题解析 以下是对 Web 前端面试题的详细解析,涵盖 HTML、CSS、JavaScript、AngularJS、Vue.js、SVG 等多个领域。 ... * 前端页面有三层构成:...* 阻止事件冒泡和默认事件的一种方法是:e.stopPropagation()

    drag-and-drop实现图片浏览器预览

    今天刚试过chrome的drag and drop API,它能非常简单的将本地的图片放...前者将会阻止事件的冒泡,后者会阻止浏览器默认的行为。 这里我们定义一个ignoreDrag函数,用以实现上述功能: Html代码  var ignoreDrag =

Global site tag (gtag.js) - Google Analytics