如何防止按钮在标签控件内单击？

我有这样的HTML代码：如何防止按钮在标签控件内单击？

<label style="padding: 0px 0px!important; text-align:center"> 
    <span style="color: gray">Some Text</span>   
     <button onclick='alert("Hello!")' style="cursor: pointer;">  
       <i class="glyphicon glyphicon-pushpin btn-lg" aria-hidden="true"></i>     </button> 
</label>

这里是JSFiddle。

在标签控件中，我声明button.Button是在单击标签中的任何区域时单击的。如何仅在单击按钮时单击它才能使按钮自行点击？

来源

2017-04-10 Michael

如果您需要HTML原样，你只能防止点击按钮与JS ... 例如在button.click上添加一个监听器，在你的点击事件中检查event.currentTarget，如果它没有按钮 - >然后preventDefault（）:)否则看看其他答案;） – MarcelD

展开标签按钮像

<label style="padding: 0px 0px!important; text-align:center"> 
    <span style="color: gray">Some Text</span> 
</label> 
<button onclick='alert("Hello!")' style="cursor: pointer;"> 
    <i class="glyphicon glyphicon-pushpin btn-lg" aria-hidden="true"></i> 
</button>

https://jsfiddle.net/xzgqLhpd/2/

来源

2017-04-10 11:42:28

在我的情况下，推针正在下降当我使用 – Michael

以上的姿态在标签显示上添加样式：inline-block; –

你的解决办法是，像这样：

<label style="padding: 0px 0px!important; text-align:center"> 
 
<span style="color: gray">Some Text</span> 
 
</label>   
 
<button onclick='alert("Hello!")' style="cursor: pointer;">  
 
    <i class="glyphicon glyphicon-pushpin btn-lg" aria-hidden="true"></i>      
 
</button>

只要将按钮的标签之外。

来源

2017-04-10 11:42:42 dutchsociety

包装元素上添加的onclick函数return false;

<label onclick="return false;"> 
 
    <span style="color: gray">Some Text</span>   
 
     <button onclick='alert("Hello!");' style="cursor: pointer;">  
 
       MY BUTTON 
 
     </button> 
 
</label>

来源

2017-04-10 11:51:09

如何防止按钮在标签控件内单击？

回答

相关问题