当父元素阻止冒泡时,不会触发 click 事件
我在一些现代浏览器中进行了测试,结果不一致。我确信这与捕获与冒泡事件支持差异有关。我已经设置了一个测试环境来复制这里的问题: pastebin 并使用 此服务运行实时预览。
问题是这样的:当祖先阻止冒泡时,某些浏览器将忽略锚点 href 单击事件。这是没有意义的,因为中间元素会在冒泡之前触发其事件,但锚元素不会。为什么 javascript click 事件有效但 href 事件无效?
以下是按下“单击我”时的结果:
Chrome 9.0.597.98:忽略 href + 打印内部和外部
IE 8.0.6001.19019:href 有效 + 内部和outter 被打印
Firefox 3.6.13:href 被忽略 + inside 和 outter 被打印
所以我的最终问题是:当祖先元素阻止事件冒泡时,如何让 href 跨浏览器工作?任何见解将不胜感激。
编辑:
我只想指出,Pointy 的评论中的讨论仍在继续,我还要感谢他的巨大帮助!
I've tested in a few modern browsers with inconsistent results. I'm sure it has something to do with capturing vs bubbling event support differences. I've setup a test environment to replicate the issue here: pastebin and use this service to run a live preview.
The problem is this: Some browsers will ignore the anchor href click event when an ancestor prevents bubbling. It doesn't make sense because the middle element will fire its event before it bubbles down but the anchor element will not. Why does a javascript click event work but the href event will not?
Here are my results when "click me" is pressed:
Chrome 9.0.597.98: href is ignored + inner and outter is printed
IE 8.0.6001.19019: href works + inner and outter is printed
Firefox 3.6.13: href is ignored + inner and outter is printed
So my ultimate question is: How do I get href to work cross-browser when an ancestor element is preventing event bubble? Any insight would be greatly appreciated.
EDIT:
I would just like to note that the discussion continues in Pointy's comments and I would also like to thank him for his tremendous help!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题是它不在
IE 中,而是:
链接在 IE 中通过,因为您没有正确告诉浏览器不要执行默认操作。
如果您希望发生默认操作,则不要调用“.preventDefault()”,也不要将“returnValue”设置为
false
。The problem is that it's not
in IE, it's:
The link makes it through in IE because you're not correctly telling the browser not to take the default action.
If you want the default action to take place, then don't call ".preventDefault()" and don't set "returnValue" to
false
.