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

问题描述

我的CODE

>

 < p id =console>< / p> 
< button>按一下< span class =icon>< / span> 
< / button> 
  

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

  .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 时，它点击整个按钮。

问题：

---

我的代码有效吗？如果我的代码是有效的，什么解决这个问题。

我尝试过的

---

1. 我尝试过 $（'。icon' c $ c>从控制台和它在ff完美工作，所以我想问题是 span 是不可点击的按钮




2. e.preventDefault（）和 e.stopPropagation




3. 我尝试过& nbsp; 解决方案

请参阅规格禁止的内容（在SGML定义中;如需帮助阅读，请查看此处） ）： a s， form s，formcontrols（ input ， select 等）和 fieldset 。

$ b b

虽然你在判断 span s（和 div s等）是正确的， a 按钮元素，非法元素都与使用除布局/样式之外的按钮内容有关。

我没有看到在规范中排除你想要做什么，但我确实看到很多不鼓励它，如果各种浏览器也不鼓励，不支持它，不会惊讶。

这就是说：找到另一种方式来做你想要的，如果你想有跨浏览器支持。我不明白你实际上想做什么，所以我不认为它可能提出替代品。我得到你想对响应不同的点击按钮vs图标 - 但这是一个（好，btw）演示你不想发生，而不是一个实际问题的解释你想解决。 / 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'）; 
 return false; 
}）; 
 $（'。button_replace'）。click（function（）{
 $（'＃console'）。html（'Button has been clicked'）; 
}）; 
< / 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 ff. 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>

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