首页 > Web传统技术 > Button标签鼠标点击事件的触发源问题

Button标签鼠标点击事件的触发源问题

Web传统技术 , , ,

写Javascript有时候真是挺郁闷的，一听到兼容性问题就头大。好多东西看起来简简单单的，还是得拿到至少5大主流浏览器上去测试才能放心。像下面的这个例子，button标签内嵌套了一个img标签。

<body>
    <button id="test">
          <img src="http://www.google.cn/favicon.ico" />
    </button>
    <script>
        document.getElementById("test").onclick=function(e){
            if (!e) {
                e = window.event;
            }
            if (!e.target && e.srcElement) {
                e.target = e.srcElement;
            }
            alert(e.target.tagName);
        }
    </script>
</body>

运行的时候先显示一个小图标：

image

点击此按钮（无论你点在哪，图标上，还是Button上），那么触发源是什么呢？直观的来看，点正中央的话应该是IMG吧，点图标边缘Button的部分触发源应该是Button吧。

可是在IE各个版本上（使用IETester可以测试不同版本IE的兼容性）和Firefox、Opera上测试的结果均是BUTTON。

image

本来以为这样就完事了，以后记住就行了，后来发现，Chrome和Safari（它们核心是一样的）上的行为和正常的期望是一致的，也就是说点中央的话，触发源是IMG，点边缘的话触发源是BUTTON。

又测试了Button内包含其他HTML标签，行为和IMG一样。不知道为什么要这样实现。真希望某一天所有不合标准的浏览器，特别是IE6彻底毁灭了，这样Web开发人员就可以少头疼一下了。

——Kevin Yang

你可能对下面的文章感兴趣

本博客遵循CC协议2.5，即署名-非商业性使用-相同方式共享
写作很辛苦，转载请注明作者以及原文链接~
如果你喜欢我的文章，你可以订阅我的博客:-D点击订阅我的文章

  1. X﹏X 到现在还没有评论~
  1. 暂时没有trackbacks.