how to disable or ignore a click() event

Question

I've made a card surrounding with an anchor tag and applied a onclick() event on the card using it's id, the click is working fine but the problem here is even if the checkbox, image or button of card gets clicked the click event of the card fires up but I've to use the checkbox and button for another purpose, so is there any way to disable or ignore the click event of the card when the checkbox or the button gets clicked

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')
});

Please help me here

@Ibnelaiq appreciate your help but it'll easy for me if you provide me a demonstration or give a link of the source as I'm still a learner — Cybertronian, Nov 22 '19 at 12:06
https://stackoverflow.com/questions/26061254/ignore-parent-onclick-event-when-child-element-is-clicked/26098731 [possible duplicate] — Prawin soni, Nov 22 '19 at 12:08
Possible duplicate of [jquery - disable click](https://stackoverflow.com/questions/4589964/jquery-disable-click) — Sudhir Ojha, Nov 22 '19 at 12:08
`$("#block a").click(function(e) { e.stopPropagation(); });` — Ahmed Ali, Nov 22 '19 at 12:10
@Cybertronian May be that is because you have included all the in the `` tag. Can you try to put your image, checkbox or button in a separate div. — Anshu Sharma, Nov 22 '19 at 12:10
@Ibnelaiq and what if i want to add another click event on `#block a` from `$("#block a").click(function(e) { e.stopPropagation(); });` — Cybertronian, Nov 22 '19 at 12:19

score 1 · Answer 1 · answered Nov 22 '19 at 12:21

1

You can try below code.

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

answered Nov 22 '19 at 12:21

Pushprajsinh Chudasama

7,772
4
20
43

score 1 · Answer 2 · answered Nov 22 '19 at 12:51

1

Just off click event for that particular button-through following code,

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

This will work perfectly.

answered Nov 22 '19 at 12:51

Kali SPM

137
1
5

what if i want to set another function – Cybertronian Nov 23 '19 at 08:20

score 0 · Answer 3 · edited Nov 22 '19 at 16:23

0

One option through. CSS

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

Or through jQuery:

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

edited Nov 22 '19 at 16:23

marc_s

732,580
175
1,330
1,459

answered Nov 22 '19 at 12:09

Muhammad Kamran Aslam

558
4
9

score 0 · Answer 4 · answered Nov 22 '19 at 12:23

Try putting these lines in the click event of child elements to disable triggering the click event of parent element

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

Eg:

 $("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();
 });

how to disable or ignore a click() event

4 Answers4