Остановить распространение при входном щелчке
У меня есть 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