Остановить распространение при входном щелчке

У меня есть HTML-таблица, и когда пользователь щелкает строку таблицы, флажок строки проверяется, и некоторые другие функции возникают. Когда пользователь нажимает на выбор или ввод, я хотел бы остановить распространение, чтобы флажок не изменился. Я продемонстрировал функциональность, которую я ищу в этом JSFiddle:

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

На моем сайте разработки, когда пользователь нажимает кнопку выбора, флажок изменяется (как и предполагалось), но если пользователь нажимает на вход, флажок не меняется. У меня есть этот код, чтобы остановить изменение флажка:

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

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

У кого-нибудь есть идея относительно того, почему щелчок выбора работает, а щелчок ввода - нет?

Обновить*

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

Я добавил новый JSFiddle, который запускает оповещение при щелчке по входу и оповещение при щелчке по строке. В скрипке, если я нажимаю на вход, срабатывает только входное предупреждение. Если я проведу этот же тест на своем сайте разработки, сработает только предупреждение о строке.

Вот фактический код на моем сайте разработки:

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

1 ответ

Использование event.preventDefault(),

event.stopPropagation() останавливает событие от всплытия родительских элементов в DOM (или вниз, если вы слушаете во время фазы захвата). В то время как event.preventDefault() останавливает поведение по умолчанию в браузере.

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

Другие вопросы по тегам