输入点击停止传播

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>

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

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