Javascript 单击div中的文本框时，div onclick java脚本函数fire

我有一个文本框在一个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>

@{int i=0；}
@foreach（Model.JobPostSundayTimeSlotVMList中的var m）
{
var divId=“SunSlot”+i；
var checkboxId=“SunIsSelected”+i；
var bitRate=“SunRate”+i；
@Html.CheckBox（“[”+i+“].SunIsSelected”，m.SunIsSelected，new{@id=checkboxId，@hidden=“hidden”}）
@Html.TextBox（“[”+i+“].SunParttimerBidValue“，”，new{@id=bitRate，@class=“form control”，@placeholder=m.SunParttimerBidValue.ToString（“C2”），@style=“height:20px”}）
i++；
}
函数setSlotColor（divId，复选框）{
var属性=document.getElementById（divId）；
if（$（'#'+复选框）.prop（'checked'））{
$（'#'+复选框）.prop（'checked'，false）；
property.style.backgroundColor=“白色”；
}
其他的
{
property.style.backgroundColor=“burlywood”；
$（'#'+复选框）.prop（'checked'，true）；
}
}

试试这个

在脚本中包含以下代码。它将从

onClick

事件中将文本框排除到div中

如果将

div

选择器替换为更具体的div id或div css类名

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

---

将事件传递给方法，然后尝试执行

event.stopPropagation（）-这将阻止事件冒泡到其他元素

有趣的阅读-