[英]span inside button, is not clickable in Firefox
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 .icon
in Chrome , but not in Firefox.我可以在 Chrome 中点击
.icon
,但不能在 Firefox 中点击。 When I click on .icon
, it clicks on whole button
.当我点击
.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 that span
is not clickable inside button
.我曾尝试从控制台执行
$('.icon').click()
并且它在 ff 中完美运行,所以我想问题是span
在button
内不可点击。
e.preventDefault()
and e.stopPropagation
are not working either. e.preventDefault()
和e.stopPropagation
也不起作用。
I've tried putting
我试过把
inside span
but its not working either.在
span
但它也不起作用。
Refer to the spec , most notably the forbidden contents (in the SGML definition; for assistance reading that, look here ): a
s, form
s, form "controls" ( input
, select
, etc), and fieldset
s.参考规范,最值得注意的是禁止的内容(在 SGML 定义中;为了帮助阅读,请看这里):
a
s、 form
s、表单“控件”( input
、 select
等)和fieldset
s。
While you are correct in asserting that span
s (and div
s, etc) are legal contents of a button
element, the illegal elements are all to do with having button content that does anything other than layout / styling.虽然您断言
span
s(和div
s 等)是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 span
or 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>
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 $("button").click()
监听器,以及<span>
or any other <tag>
, and<span>
或任何其他<tag>
,并且.click
callback function refers to $(this)
(or even this
).click
回调函数指的是$(this)
(甚至this
) Then, if you click on the button, this
will 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!希望它可以帮助那里的人!
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) 事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.