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:

/

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: /

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>

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/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/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>

• javascript
• jquery
• html
• stoppropagation

• 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 Commented Dec 2, 2014 at 19:04
• Are you sure @rfornal? api.jquery./event.stoppropagation – epascarello Commented Dec 2, 2014 at 19:07
• Yay, even works in IE, so I assume its a caching problem (you're actually running old code). – Jonathan Commented Dec 2, 2014 at 19:07
• 1 Did you try e.preventDefault() as well? – dudewad Commented Dec 2, 2014 at 19:08
• @epascarello ... I was thinking of preventDefault in my previous ment. Thanks for the catch. – rfornal Commented Dec 2, 2014 at 19:35

1 Answer 1

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/en-US/docs/Web/API/event.preventDefault

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