Обнаружьте фоновый щелчок в jQuery
Скажите, что у меня есть следующий HTML:
<div>
<span>span text</span> div text <span>some more text</span>
</div>
Я хочу сделать его так, чтобы, когда я нажимаю на промежуток, он инициировал некоторое событие (например, сделать текст полужирным), это легко:
$('span').click( ... )
Но теперь я, когда я нажимаю далеко от элемента, я хочу, чтобы другое событие инициировало (например, сделало текст нормальным весом). Я должен обнаружить, так или иначе, щелчок не в элементе промежутка. Это очень похоже на размытость () событие, но для не ВХОДНЫЕ элементы. Я не возражаю, если этот щелчок только обнаруживается в элементе DIV а не всем ТЕЛЕ страницы, btw.
Я пытался заставить событие инициировать в элементах непромежутка со следующим:
$('div').click( ... ) // triggers in the span element
$('div').not('span').click( ... ) // still triggers in the span element
$('div').add('span').click( ... ) // triggers first from span, then div
Другое решение состояло бы в том, чтобы считать цель события в событии щелчка. Вот пример реализации его этот путь:
$('div').click(function(e) {
if (e.target.nodeName != "span")
...
});
Я задавался вопросом, было ли более изящное решение как размытость () все же.
4 ответа
Ваш последний метод должен работать лучше, даже если это грязно. Вот немного утонченности:
$('span').click(function() {
var span = $(this);
// Mark the span active somehow (you could use .data() instead)
span.addClass('span-active');
$('div').click(function(e) {
// If the click was not inside the active span
if(!$(e.target).hasClass('span-active')) {
span.removeClass('span-active');
// Remove the bind as it will be bound again on the next span click
$('div').unbind('click');
}
});
});
Это не чисто, но он должен работать. Нет ненужных связей, и это должно быть надежно непроницаемыми (без ложных срабатываний и т. Д.).
Если вы возвращаете False с вашего обработчика клики для диапазона, вы предотвратите мероприятие от Bubbing, который будет держать обработчик Div Click от работы.
Я придумал решение этой проблемы, прежде чем был выпущен jQuery ...
Определите, нажал ли любой другой внешний элемент с JavaScript
document.onclick = function() {
if(clickedOutsideElement('divTest'))
alert('Outside the element!');
else
alert('Inside the element!');
}
function clickedOutsideElement(elemId) {
var theElem = getEventTarget(window.event);
while(theElem != null) {
if(theElem.id == elemId)
return false;
theElem = theElem.offsetParent;
}
return true;
}
function getEventTarget(evt) {
var targ = (evt.target) ? evt.target : evt.srcElement;
if(targ != null) {
if(targ.nodeType == 3)
targ = targ.parentNode;
}
return targ;
}