在按钮中跨度，在Firefox中不可点击 [英] span inside button, is not clickable in Firefox

问题描述

我的密码

---

HTML：

 < p id = console< / p> 
< button>点击< span class = icon>< / span> 
< / button> 
  

JS：

  $（'。icon'）。click（function（）{
 $（'＃console'）。html（'Icon has been clicked'）; 
返回false; 
}）; 
 
 $（'button'）。click（function（）{
 $（'＃console'）。html（'Button has been clicked'）; 
}）; 
  

CSS：

  .icon {
背景位置：-96px 0； 
显示：inline-block; 
宽度：14像素； 
高度：14像素； 
 margin-top：1像素； 
行高：14px; 
 vertical-align：text-top; 
 background-image：url（ http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png）； 
背景重复：不重复； 
} 
  

演示

问题

---

我是可以在Chrome中单击 .icon ，但在Firefox中不能单击。当我单击 .icon 时，它单击整个按钮。

问题：

---

我的代码有效吗？如果我的代码有效，该问题的解决方案是什么。

我尝试过的事情

---

1. 我尝试从控制台执行 $（'。icon'）。click（），它在ff，所以我想问题是 span 在按钮内不可单击。

   
   



2. e.preventDefault（）和 e.stopPropagation 是

   
   



3. 我尝试将& nbsp; 放入 span 但它也不起作用。

   
   

解决方案

请参阅规范，最明显的是禁止使用的内容（在SGML定义中；为帮助阅读，查看此处）： a s，表格 s，表格控件（ 输入，选择等）和 fieldset s。

您断言 span s（和 div 等）是 button 元素的合法内容，非法元素与按钮有关

我在规范中没有看到任何东西会妨碍您尝试做的事情，但我确实感到很沮丧

这是要说的：寻找另一种方式来做自己想要的事情具有跨浏览器支持。我不了解您实际上要做什么，因此我认为不可能提出替代方案。我知道您想对单击按钮和图标做出不同的反应-但这是对您不希望发生的事情的（很好的，顺便说一句）演示，而不是要解决的实际问题的说明。 / p>

一种方法可能是不使用按钮，而是使用另一个 span 或 div ：

 < p id = console>< / p> 
< div class = button_replace>点击< span class = icon>< / span>< / div> 
< script> 
 $（'。icon'）。click（function（）{
 $（'＃console'）。html（'Icon has been clicked'）; 
返回false; 
}）; 
 $（'。button_replace'）。click（function（）{
 $（'＃console'）。html（'Button被单击'）; 
}）; 
< / script> 
  

My CODE

---

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;
}

Demo

Problem

---

I am able to click on .icon in Chrome , but not in Firefox. When I click on .icon, it clicks on whole button.

Question:

---

Isnt my code valid ? If my code is valid, whats the solution to this problem.

What I have tried

---

1. 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.

2. e.preventDefault() and e.stopPropagation are not working either.

3. I've tried putting   inside span but its not working either.

解决方案

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.

While you are correct in asserting that spans (and divs, 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.

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:

<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>

这篇关于在按钮中跨度，在Firefox中不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！