javascript 跨度内部按钮，在 ff 中不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14689879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
span inside button, is not clickable in ff
提问by Jashwant
My CODE
我的代码
HTML:
HTML：
<p id="console"></p>
<button>Click <span class="icon"></span>
</button>
JS:
JS：
$('.icon').click(function () {
$('#console').html('Icon has been clicked');
return false;
});
$('button').click(function () {
$('#console').html('Button has been clicked');
});
CSS:
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;
}
Problem
问题
I am able to click on .iconin chrome , but not in ff. When I click on .icon, it clicks on whole button.
我可以.icon在 chrome 中单击，但不能在 ff 中单击。当我点击时.icon，它点击整个button。
Question:
问题：
Isnt my code valid ? If my code is valid, whats the solution to this problem.
我的代码无效吗？如果我的代码有效，那么这个问题的解决方案是什么。
What I have tried
我试过的
I have tried doing
$('.icon').click()from console and it works perfectly in ff, so I guess the problem is thatspanis not clickable insidebutton.e.preventDefault()ande.stopPropagationare not working either.I've tried putting
insidespanbut its not working either.
我试过
$('.icon').click()从控制台做，它在 ff 中完美运行，所以我想问题是span在button.e.preventDefault()并且e.stopPropagation也不工作。我试过放在
里面，span但它也不起作用。
回答by Carl
Refer to the spec, most notably the forbidden contents (in the SGML definition; for assistance reading that, look here): as, forms, form "controls" (input, select, etc), and fieldsets.
请参考规范，最引人注目的是禁止的内容（在SGML定义;援助读取，看这里）：aS，forms和形式的“控制”（ ，input，select等），和fieldset秒。
While you are correct in asserting that spans (and divs, etc) are legal contents of a buttonelement, the illegal elements are all to do with having button content that does anything other than layout / styling.
虽然您断言spans（和divs 等）是button元素的合法内容是正确的，但非法元素都与具有除布局/样式之外的任何其他功能的按钮内容有关。
I don't see anything in the spec precluding what you're trying to do, but I do see a lot discouraging it, and would be unsurprised if various browsers also "discouraged" that by not supporting it.
我在规范中没有看到任何妨碍您尝试做的事情，但我确实看到了很多令人沮丧的事情，如果各种浏览器也因不支持它而“劝阻”这一点，我也不会感到惊讶。
Which is to say: find another way to do what you want if you want to have cross-browser support. I don't understand what you're actually trying to do, so I don't think its possible to propose alternatives. I get that you want to respond differently to clicking on the button vs the icon -- but that's a (good, btw) demonstration of what you don't want to happen, not an explanation of an actual problem you want to solve.
也就是说：如果您想获得跨浏览器支持，请找到另一种方式来做您想做的事。我不明白你实际上想要做什么，所以我认为不可能提出替代方案。我知道你想要对点击按钮和图标做出不同的反应——但这是你不想发生的事情的（好的，顺便说一句）演示，而不是对你想要解决的实际问题的解释。
One way might be to not use a button, and instead use another spanor a div:
一种方法可能是不使用按钮，而是使用另一个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>
回答by 1owk3y
If you're here, maybe this solution will work for you, even though it's not really related directly to the question.
如果你在这里，也许这个解决方案对你有用，即使它与问题没有直接关系。
If you've applied a
如果你已经申请了
$("button").click()listener, and- your button contains a
<span>or any other<tag>, and - your
.clickcallback function refers to$(this)(or eventhis)
$("button").click()听众，和- 您的按钮包含 a
<span>或任何其他<tag>, 和 - 您的
.click回调函数是指$(this)（或什至this）
Then, if you click on the button, thiswill likely be the top-most tag you CLICKED ON.
然后，如果您单击该按钮，this则可能是您单击的最上面的标签。
This will often, such as in my case, misattribute the caller, causing script errors.
这通常会（例如在我的情况下）错误地归因于调用者，从而导致脚本错误。
Hope it helps someone out there!
希望它可以帮助那里的人！
回答by sivi911
Using previous answers, I found that just changing my to fixed the problem and allowed me to have content inside the button. The styling is virtually the same, I just left the same bootstrap button classes and element in there and it behaves just the same as before. The tabindex is there because I'm using a dropdown list inside the button so that the button (now div) can be focused and have (blur) or (focusout) event in Angular.
使用以前的答案，我发现只需更改我的即可解决问题并允许我在按钮内包含内容。样式几乎相同，我只是在那里留下了相同的引导按钮类和元素，它的行为与以前一样。tabindex 在那里是因为我在按钮内使用了一个下拉列表，以便按钮（现在是 div）可以聚焦并在 Angular 中具有 (blur) 或 (focusout) 事件。
