当点击div里面的文本框时，div onclick java脚本函数fire

Question

我在文本框中有一个div，我使用onclick java脚本函数来改变当我点击div时的颜色。但问题是为什么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