Question

我已经用锚标签在卡片周围制作了一个卡片，并使用其ID在卡片上应用了onclick（）事件，点击效果很好，但是即使点击了卡片checkbox, image or button，这里的问题仍然存在卡的点击事件触发，但我必须将checkbox and button用于其他用途，因此，当复选框或按钮被单击时，有什么方法可以禁用或忽略卡的点击事件

HTML：

<div id="row" id"myDiv">
    <div class="col-6">
        <div class="card card2"
                style="margin-bottom: 0.5rem !important;"
                id="btnQuoteSummary">
            <div class="row">
                <div class="col-9"></div>
                <div class="col-3">
                    <div class="form-check">
                        <input type="checkbox" name="checkSelect"
                            id="checkSelect1"><label for="checkSelect1"></label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <div class="card-header">
                        <span class="float-left"><img
                            class="card-img-top insLogo"
                            style="width: 5rem; object-fit: contain;"
                            src="/static/images/86d5b04c-1201-4ef4-b0e8-88503c719e2b.jpg"
                            alt="my image"></span>
                    </div>
                </div>
                <div class="col-4"></div>
                <div class="col-4">
                    <div class="min-width-zero">
                        <button class="btn btn-primary">
                            <span>3,954</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-8">
                    <p class="mb-2 text-muted" style="margin-left: 4.5rem;">value</p>
                </div>
                <div class="col-4">
                    <p class="mb-2 text-muted">4.35</p>
                </div>
            </div>
        </div>
</div>

jQuery：

$('#myDiv').on('click', '#btnQuoteSummary', function () {
    alert('card click event fired')
});

请在这里帮助我

Answer 1

您可以尝试以下代码。

$(document).ready(function(){
  $('#btnQuoteSummary').click(function(event){
        alert('card click event fired');
        event.preventDefault();
    });
});

Answer 2

一个选项。 CSS

.avoid-clicks {
  pointer-events: none;
}

或通过jQuery：

$( "#btnQuoteSummary " ).click(function( event ) {
  event.preventDefault();
}

Answer 3

尝试将这些行放在子元素的click事件中，以禁用触发父元素的click事件

if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();

例如：

 $("your-button-id / your-input-checkbox-id /your-img-id etc").click(function(){
    /*
    code to execute (if any)
    */
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
 });

Answer 4

只需遵循以下代码，即可关闭该特定按钮的点击事件，

$('#btnQuoteSummary').off('click');

这将很好地工作。

如何禁用或忽略click（）事件

4 个答案: