我的代码
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
,但不能点击ff。当我点击.icon
时,会点击整个button
。
问题:
我的代码有效吗?如果我的代码有效,那么解决这个问题的方法是什么。
我尝试了什么
我尝试从控制台执行$('.icon').click()
并且它在ff中完美运行,所以我猜问题是span
在button
内无法点击。
e.preventDefault()
和e.stopPropagation
也无效。
我尝试将
放在span
内,但它也无效。
答案 0 :(得分:12)
请参阅spec,最明显的是禁止内容(在SGML定义中;有助于阅读look here):a
s,form
s,表单“控件”(input
,select
等)和fieldset
s。
虽然你断言span
s(和div
s等)是button
元素的合法内容是正确的,但非法元素与拥有按钮内容有关除了布局/样式之外,它还可以做任何事情。
我没有看到规范中的任何内容排除了你想要做的事情,但我确实看到了很多令人沮丧的事情,并且如果各种浏览器也“不鼓励”不支持它,那就不足为奇了。
也就是说:如果您想要跨浏览器支持,找另一种方法来做您想做的事情。我不明白你究竟想做什么,所以我认为不可能提出替代方案。我得到你想要点击按钮与图标的不同反应 - 但这是一个(好的,顺便说一句)你不想发生什么的演示,而不是你要解决的实际问题的解释。 / p>
一种方法可能是不使用按钮,而是使用其他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>
答案 1 :(得分:0)
如果你在这里,也许这个解决方案对你有用,即使它与问题没有直接关系。
如果您已申请
$("button").click()
听众,<span>
或任何其他<tag>
和.click
回调函数是指$(this)
(甚至是this
) 然后,如果您点击该按钮,this
可能会是您点击的最顶部标记。
通常,例如在我的情况下,会错误地分配调用者,从而导致脚本错误。
希望有人帮助那里的人!
答案 2 :(得分:0)
使用以前的答案,我发现只需更改我来修复问题并允许我在按钮内有内容。 样式几乎相同,我只是在那里留下相同的引导按钮类和元素,它的行为与以前一样。 tabindex是因为我在按钮内使用下拉列表,因此按钮(现在是div)可以被聚焦并且在Angular中具有(模糊)或(聚焦)事件。