ラベルコントロール内のボタンクリックを防ぐにはどうすればいいですか？

Question

私は、この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がクリックされたと宣言しました。ボタンをクリックしたときにのみクリックされるようにする方法はありますか？

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

Answer 1

アンラップラベルは、あなたのソリューションは、そうのようなものです：

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

ただ、ラベルの外にボタンを配置します。

Answer 2

のようなボタンに

Answer 3

あなたがそのままあなたのHTMLが必要な場合は、あなただけのJSとボタンのクリックを防ぐことができますreturn false;

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