div内のテキストボックスをクリックするとdiv onclick java script function fire

Question

divの横にテキストボックスがあり、divをクリックすると色を変更するためにonclick java script関数が使用されています。しかし、なぜ問題は、テキストボックスをクリックしたときにonclick関数が起動するのでしょうか？このJavaスクリプトの機能の発射を防ぐためのソリューションはありますか？

<table> 
     @{int i=0;} 
     @foreach (var m in Model.JobPostSundayTimeSlotVMList) 
     { 
      var divId = "SunSlot" + i; 
      var checkboxId = "SunIsSelected" + i; 
      var bitRate = "SunRate" + i; 
      <tr> 
       <td> 
        @Html.CheckBox("[" + i + "].SunIsSelected", m.SunIsSelected, new { @id = checkboxId, @hidden = "hidden" }) 

        <div id="@divId" onclick = "setSlotColor('@divId','@checkboxId')";> 
          @Html.TextBox("[" + i + "].SunParttimerBidValue", "", new { @id = bitRate, @class = "form-control", @placeholder = m.SunParttimerBidValue.ToString("C2"), @style = "height:20px"}) 
        </div> 
       </td> 
      </tr> 
      i++; 
     } 
</table> 
<script> 
     function setSlotColor(divId, checkbox) { 
     var property = document.getElementById(divId); 
     if ($('#' + checkbox).prop('checked')) { 
     $('#' + checkbox).prop('checked', false); 
     property.style.backgroundColor = "white"; 
     } 
     else 
     { 
      property.style.backgroundColor = "burlywood"; 
      $('#' + checkbox).prop('checked', true); 
     } 
} 
</script> 

Answer 1

は、スクリプトで次のコードを含める...これを試してみてください。 onClickイベントからテキストボックスを除外します

divセレクタをより具体的なdiv idまたはdiv cssクラス名に置き換えるとします。

$("div input[type='text']").click(function() { 
    e.stopPropagation() 
}); 

Answer 2

方法にイベントを渡し、その後event.stopPropagation();をやってみてください - これは他の要素にバブルアップからイベントを停止する必要があります。

興味深い読み値 - https://javascript.info/tutorial/bubbling-and-capturing