javascript - 关于mouseenter的问题
问题描述
<head><style> .enter h2{border:1px solid;background: white;position: absolute;top: 200px; } .enter{ border:1px solid; background: #eee; width: 500px; height: 100px; }</style><script type='text/javascript' src='https://www.haobala.com/wenda/jquery/jquery-3.2.1.js'></script></head><body> <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> <p class='enter'><h2 >被触发的 Mouseenter 事件：<span></span></h2> </p><script type='text/javascript'> x=0; y=0; $(document).ready(function(){ $('p.enter').mouseenter(function(){$('.enter span').text(y+=1); }); });</script></body>
当我用绝对定位把子元素移到下面，这时穿过子元素也会触发事件，这是怎么回事？
问题解答
回答1：absolute positioning 只是将元素抽离了 normal flow ，并没有改变 document tree 的结构，所以子元素依然算是在父元素里面。
解决方法可以是判断 event.target 是不是子元素，或者改为给两者绑定 mouseover 然后在子元素里 stopPropagation 。
回答2：根据https://www.w3.org/TR/uievent...
A user agent MUST dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and MUST NOT be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.
翻译一下就是：
当指针一类的东西移到某个元素的边界上，或者它的某个后代元素的边界上，就必须触发mouseenter事件。而当指针从某个元素里，移到它的某个后代元素的边界上时，则不可触发mouseenter事件。
所以对于你的问题，回答就是，移到后代上也会触发mouseenter是人家规定了的
相关文章：
1. android - 哪位大神知道java后台的api接口的对象传到前端后输入日期报错，是什么情况？求大神指点2. 我何时应该在Java中使用JFrame.add（component）和JFrame.getContentPane（）。add（component）3. mysql 5个left关键 然后再用搜索条件 几千条数据就会卡，如何解决呢4. node.js - webpack-dev-server正常运行，webpack打包却出错，怎么办？5. javascript - 项目的公共文件如图片JS等文件放在 云上,webroot只放jsp文件，怎么将静态文件通过配置文件引入，sp求大神指导6. 这是什么情况？？？7. thinkphp3 count()方法必须加上字段？8. 关于用java中正则表达式匹配单个字符9. 怎么php怎么通过数组显示sql查询结果呢，查询结果有多条，如图。我要forsearch里面echo10. python中return 语句与 分支语句连用问题
网公网安备