我的代码
HTML:
<p id="console"></p>
<button>Click <span class="icon"></span>
</button>
JS:
$('.icon').click(function () {
$('#console').html('Icon has been clicked');
return false;
});
$('button').click(function () {
$('#console').html('Button has been clicked');
});
CSS:
.icon {
background-position: -96px 0;
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
line-height: 14px;
vertical-align: text-top;
background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png");
background-repeat: no-repeat;
}
问题
我可以在 Chrome 中点击 .icon
,但不能在 Firefox 中点击。当我点击 .icon
时,它会点击整个 button
。
问题:
我的代码无效吗?如果我的代码有效,那么这个问题的解决方案是什么。
我尝试过的
我已经尝试从控制台执行
$('.icon').click()
并且它在 ff 中完美运行,所以我猜问题是span
在button
内不可点击。e.preventDefault()
和e.stopPropagation
也不工作。我试过将
span
中,但它也不起作用。
最佳答案
引用spec ,最值得注意的是禁止的内容(在 SGML 定义中;为了帮助阅读,look here):a
s,form
s,form“controls”( input
、select
等)和fieldset
。
虽然您断言 span
(和 div
等)是 button
元素的合法内容是正确的,但是非法的元素都与具有布局/样式以外的任何内容的按钮内容有关。
我在规范中没有看到任何排除您正在尝试做的事情的内容,但我确实看到很多令人沮丧的事情,如果各种浏览器也因不支持它而“劝阻”它,我也不会感到惊讶。
也就是说:如果您想获得跨浏览器支持,请找到另一种方法来做您想做的事。我不明白你到底想做什么,所以我认为不可能提出替代方案。我知道您想对单击按钮和图标做出不同的响应——但这是(很好,顺便说一句)您不希望发生的事情的演示,而不是对您想要解决的实际问题的解释。
一种方法可能是不使用按钮,而是使用另一个 span
或 div
:
<p id="console"></p>
<div class="button_replace">Click <span class="icon"></span></div>
<script>
$('.icon').click(function () {
$('#console').html('Icon has been clicked');
return false;
});
$('.button_replace').click(function () {
$('#console').html('Button has been clicked');
});
</script>
关于javascript - span inside 按钮,在 Firefox 中不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14689879/