首页 > 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.