Stop Propagation on Input Click

Question

I have an html table, and when a user clicks a table row, the row's checkbox is checked, and some other functionality occurs. When a user clicks on a select or input, I would like to stop the propagation so the checkbox does not change. I have demonstrated the functionality I am looking for in this JSFiddle:

http://jsfiddle.net/ehf7pc3f/6/

On my development site, when a user clicks a select, the checkbox is changed (as intended), but if a user clicks an input, the checkbox does not change. I have this code to stop the checkbox from changing:

$("select").click(function (e) {
    e.stopPropagation();
});

$("input").click(function (e) {
    e.stopPropagation();
});

Does anyone have an idea as to why the select click works, but the input click does not?

Update*

JSFiddle: http://jsfiddle.net/ehf7pc3f/8/

I have added a new JSFiddle that fires an alert when the input is clicked and an alert when a row is clicked. In the fiddle, if I click the input, only the input alert fires. If I do this same test on my development site, only the row alert fires.

Here's the actual code on my development site:

<table class="full-width row-table" style="table-layout:fixed;">
    <tr style="background:none;" class="no-hover row">
        <td class="no-padding" style="width:16px;"><input class="check-box" style="margin:2px 0px;" type="checkbox" /></td>
        <td class="no-padding" style="width:6px;"><span class="arrow2" style="margin:6px 0px 0px 0px;"></span></td>
        <td style="width:94px;">
            <span class="contact-label">Owner <br /> </span>
            <select class="contact-drop-down hidden">
                <option value="Owner">Owner</option>
                <option value="Applicant">Applicant</option>
                <option value="Contractor">Contractor</option>
            </select>
        </td>
        <td style="width:95px;">
            <p class="title-label">Owner</p>
        </td>
        <td style="width:119px;">
            <p class="name-label">Michael Douglas</p>
        </td>
    </tr>
</table>

stopPropogation is designed to stop normal functioning (i.e. anchor will navigate to the href address). This does not stop other code added via some form of jquery event handling. — rfornal, Dec 02 '14 at 19:04
Are you sure @rfornal? http://api.jquery.com/event.stoppropagation/ — epascarello, Dec 02 '14 at 19:07
Yay, even works in IE, so I assume its a caching problem (you're actually running old code). — Jonathan, Dec 02 '14 at 19:07
@epascarello ... I was thinking of preventDefault in my previous comment. Thanks for the catch. — rfornal, Dec 02 '14 at 19:35
It works correctly in my Fiddle, but not on my development site... @Deleteman — EricBellDesigns, Dec 02 '14 at 19:55
@rfornal it works as intended on selects, so why would it be different for an input? — EricBellDesigns, Dec 02 '14 at 19:56
Weird. I see it working. There is likely more code on your prod site, yes? I assume there's a conflict there. Can you post some code from the prod version? — dudewad, Dec 02 '14 at 20:19
@dudewad yeah, it's very strange. I just added my actual html to the question. — EricBellDesigns, Dec 02 '14 at 20:26
Possible duplicate of [How to stop event bubbling on checkbox click](http://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click) — Factor Mystic, Mar 30 '17 at 18:10

score 3 · Answer 1 · edited Apr 28 '19 at 11:37

3

Use event.preventDefault().

The event.stopPropagation() stops the event from bubbling up the parent elements in the DOM (or down if you're listening during capture phase). While event.preventDefault() stops default behaviour by the browser.

Further reading:

https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

edited Apr 28 '19 at 11:37

Zoe

27,060
21
118
148

answered Dec 02 '14 at 20:30

jamesism

206
1
3

As I stated in the comments, I have tried preventDefault() as well and it does not work. I have yet to get an answer as to why the same code works on ... @jamesism – EricBellDesigns Dec 02 '14 at 20:35
I forked your fiddle http://jsfiddle.net/ks5pr24n/ and it works properly for me when you click the input (checkbox) it does not check the checkbox. However if you click the row your code that manually sets the checked attribute will still be called. Similarly if your input handler calls only preventDefault and not stopPropogation then the event will bubble to your '.row' click handler and call the same code that manually sets the checked attribute. – jamesism Dec 02 '14 at 20:40

Stop Propagation on Input Click

1 Answers1