js阻止冒泡 jquery阻止冒泡

最新推荐文章于 2024-08-10 02:17:33 发布

北京-星辰

最新推荐文章于 2024-08-10 02:17:33 发布

阅读量2.4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/chx10051413/article/details/14222957

版权

JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

love聊网络那点事：http://weibo.com/u/3923942488

Ｊｓ阻止冒泡

在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。

function stopPro(evt){

var e = evt || window.event;

//returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，

//可以取消发生事件的源元素的默认动作。

//window.event?e.returnValue = false:e.preventDefault();

window.event?e.cancelBubble=true:e.stopPropagation();

}

或者：

function cancelBubble(e) {

var evt = e ? e : window.event;

if (evt.stopPropagation) {

//W3C

evt.stopPropagation();

}

else {

//IE

evt.cancelBubble = true;

}

Jquery是屏蔽了它们之间的区别。

JQuery 提供了两种方式来阻止事件冒泡。

方式一：event.stopPropagation();

        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });

方式二：return false;

        $("#div1").mousedown(function(event){
            return false;
        });

Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。

例如：

$("a").click(function(event){
                   event.preventDefault(); //阻止默认动作即该链接不会跳转。
                   alert(4);//但是这个还会弹出
                   event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
                   return false;//不仅阻止了事件往上冒泡，而且阻止了事件本身
               });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

场景应用：Google 和百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

Jquery案例：

Js案例：

        function tt(){
           alert("div");
       }

       function ttt(){
           var e = arguments.callee.caller.arguments[0] || window.event;
           window.event?e.returnValue = false:e.preventDefault();
           alert(3);
           window.event?e.cancelBubble:e.stopPropagation();
           alert(4);
       }
   </script>
   </head>
   <body>
       <div onclick = "tt();">
            ccccc
           <a href="http://baidu.com" οnclick="ttt();">baidu.com</a>
       </div>

Ｗ３Ｃ：顺便复习下Ｅｖｅｎｔ：

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法	描述	IE	F	O	W3C
initEvent()	初始化新创建的 Event 对象的属性。	No	1	9	Yes
preventDefault()	通知浏览器不要执行与事件关联的默认动作。	No	1	9	Yes
stopPropagation()	不再派发事件。	No	1	9	Yes

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性	描述	IE	F	O	W3C
bubbles	返回布尔值，指示事件是否是起泡事件类型。	No	1	9	Yes
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。	No	1	9	Yes
currentTarget	返回其事件监听器触发该事件的元素。	No	1	9	Yes
eventPhase	返回事件传播的当前阶段。				Yes
target	返回触发此事件的元素（事件的目标节点）。	No	1	9	Yes
timeStamp	返回事件生成的日期和时间。	No	1	9	Yes
type	返回当前 Event 对象表示的事件的名称。	6	1	9	Yes

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

鼠标 / 键盘属性

属性	描述	IE	F	O	W3C
altKey	返回当事件被触发时，"ALT" 是否被按下。	6	1	9	Yes
button	返回当事件被触发时，哪个鼠标按钮被点击。	6	1	9	Yes
clientX	返回当事件被触发时，鼠标指针的水平坐标。	6	1	9	Yes
clientY	返回当事件被触发时，鼠标指针的垂直坐标。	6	1	9	Yes
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。	6	1	9	Yes
metaKey	返回当事件被触发时，"meta" 键是否被按下。	No	1	9	Yes
relatedTarget	返回与事件的目标节点相关的节点。	No	1	9	Yes
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。	6	1	9	Yes
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。	6	1	9	Yes
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。	6	1	9	Yes