简单的鼠标移动事件：

进入

mouseenter：不冒泡

mouseover: 冒泡

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件

移出

mouseleave: 不冒泡

mouseout：冒泡

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

我们通过一个案例观察下问题：

给一个嵌套的层级绑定mouseout事件，会发现mouseout事件与想象的不一样

<!DOCTYPE html><div class="out overout" style="width:40%;height:120px; margin:0 15px;background-color:#D6EDFC;float:left;" data-mce-style="width: 40%; height: 120px; margin: 0 15px; background-color: #d6edfc; float: left;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">外部子元素</p><div class="in overout" style="width:60%;background-color:#FFCC00;margin:10px auto;" data-mce-style="width: 60%; background-color: #ffcc00; margin: 10px auto;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">内部子元素</p><p id="inshow">0</p>
</div><p id="outshow">0</p>
</div><script type="text/javascript">

var i = 0;
var k = 0;

document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){
document.querySelectorAll("#inshow")[0].textContent = (++i)
e.stopPropagation();
},false)

document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){
document.querySelectorAll("#outshow")[0].textContent = (++k)
},false)

</script>

我们发现一个问题mouseout事件：

  1. 无法阻止冒泡
  2. 在内部的子元素上也会触发

同样的问题还有mouseover事件，那么在stopPropagation方法失效的情况下我们要如何停止冒泡呢？

  • 为了阻止mouseover和mouseout的反复触发，这里要用到event对象的一个属性relatedTarget，这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时，relatedTarget属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性，不过它有代替的属性，分别是 fromElement和toElement。
  • 有了这个属性，我们就能够清楚的知道我们的鼠标是从哪个对象移过来，又是要移动到哪里去了。这样我们就能够通过判断这个相关联的对象是否在我们要触发事件的对象的内部，或者是不是就是这个对象本身。通过这个判断我们就能够合理的选择是否真的要触发事件。
  • 这里我们还用到了一个用于检查一个对象是否包含在另外一个对象中的方法，contains方法。MSIE和FireFox分别提供了检查的方法，这里封装了一个函数。

jQuery的处理也是如出一辙

jQuery.each({

        mouseenter: "mouseover",

        mouseleave: "mouseout",

        pointerenter: "pointerover",

        pointerleave: "pointerout"

    }, function(orig, fix) {

        jQuery.event.special[orig] = {

            delegateType: fix,

            bindType: fix,

            handle: function(event) {

                var ret,

                    target = this,

                    related = event.relatedTarget,

                    handleObj = event.handleObj;

                // For mousenter/leave call the handler if related is outside the target.

                // NB: No relatedTarget if the mouse left/entered the browser window

                if (!related || (related !== target && !jQuery.contains(target, related))) {

                    event.type = handleObj.origType;

                    ret = handleObj.handler.apply(this, arguments);

                    event.type = fix;

                }

                return ret;

            }

        };

    });

鼠标mouse事件冒泡处理的更多相关文章

  1. win8下IE10的鼠标mouse事件响应错误BUG

    具体症状就是有时候鼠标左键响应,有时候右键才能响应 问题的原因就是事件对象的detail没有复位 https://github.com/clientside/amplesdk/issues/187

  2. 3D Slicer Modify Mouse Event 修改3D Slicer中的鼠标响应事件

    在3D Slicer中,我们如果想在自己写的插件中来修改默认的鼠标响应事件的话,就需要先将原有的响应事件链接删除,然后建立自定义的响应事件链接,然后将自己要实现的功能写在响应事件函数中. 比如Slic ...

  3. 在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件

    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...

  4. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  5. 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同

    二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...

  6. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  7. onmouse事件与mouse事件

    1.mouse是js,onmouse是html的,其实差别就是加了一个on 2.mouse事件:鼠标移动时:1>会有冒泡的:mouseover ,mouseout 2>没有事件冒泡的: m ...

  8. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  9. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

随机推荐

  1. Android SDK Manager 更新代理配置

    转自:http://www.cnblogs.com/tao560532/p/4483067.html 出现问题: 消除SDK更新时,有可能会出现这样的错误:Download interrupted: ...

  2. bzoj3631树链剖分

    虽然是水题1A的感觉太爽了O(∩_∩)O~ 题意相当于n-1次树上路径上每个点权值+1,最后问每个点的权值 本来想写线段树,写好了change打算框架打完了再来补,结果打完发现只是区间加和单点查 前缀 ...

  3. linux下的tcp连接超时

    最近需要写一个linux下的通信程序, 通信模块用的是Qt的QTcpSocket. 最后程序需要增加一个断网检测, 在windows下调试没问题, 拔网线, 断网口都能马上检测到, 但到了部署到lin ...

  4. fatal error

    1.   fatal error C1083: 无法打开源文件 编译报此错误:  1>c1xx : fatal error C1083: 无法打开源文件:“Projects\XXXCCCC\VB ...

  5. JS写入日志

    try { var WSShell = WScript.CreateObject("WScript.Shell"); var FileSys = WScript.CreateObj ...

  6. Usaco*Monthly Expense

    Description Farmer John是一个令人惊讶的会计学天才,他已经明白了他可能会花光他的钱,这些钱本来是要维持农场每个月的正常运转的.他已经计算了他以后N(1<=N<=100 ...

  7. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  8. Kafka设计解析（五）- Kafka性能测试方法及Benchmark报告

    本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/12/31/KafkaColumn5_kafka_benchmark 摘要 本文主要介绍了如何利用 ...

  9. 《寒江独钓_Windows内核安全编程》中修改类驱动分发函数

    最近在阅读<寒江独钓_Windows内核安全编程>一书的过程中,发现修改类驱动分发函数这一技术点,书中只给出了具体思路和部分代码,没有完整的例子. 按照作者的思路和代码,将例子补充完整,发 ...

  10. SQL Server 2016 CTP2.3 的关键特性

    SQL Server 2016 CTP2.3 的关键特性 数据库方面的增强 Row Level Security已经支持In-memory OLTP 表.用户现在可以对内存优化表实施row-level ...