Обнаружение фона нажмите на JQuery

Question

Скажем, у меня есть следующий HTML:

<div> 
    <span>span text</span> div text <span>some more text</span> 
</div> 

Я хочу сделать так, чтобы, когда я нажимаю на пролете, это вызовет какое-либо событие (например, чтобы сделать текст жирным шрифтом), это легко:

$('span').click(...) 

Но теперь я, когда я нажимаю от элемента, я хочу еще одно событие, чтобы вызвать (например, чтобы сделать нормальный вес текста). Мне нужно каким-то образом обнаружить клик не внутри элемента span. Это очень похоже на событие blur(), но не для элементов INPUT. Я не против, если этот клик обнаружен только внутри элемента DIV, а не всего BODY страницы, кстати.

Я пытался получить событие, чтобы вызвать в не SPAN элементов со следующим:

$('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") 
    ... 
}); 

мне было интересно, если есть более элегантное решение, как размытие(), хотя.

Answer 1

Ваш последний метод должен работать лучше всего, даже если он грязный. Вот небольшая доработка:

$('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'); 
     } 
    }); 
}); 

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

Answer 2

$(':not(span)').click(function(){ 
    //dostuff 
}) 

Answer 3

Я придумал решение этой проблемы до JQuery был выпущен ...

Determine if any Other Outside Element was Clicked with 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; 
} 

Answer 4

Если вы возвращаете ложь из обработчика щелчка на пролете вы будете предотвратить событие от барботажа, которое не позволит работать с обработчиком div.

Answer 5

Используя tabIndex свойство, вы можете сделать произвольные элементы фокусирования:

var node = document.createElement("span"); 
node.tabIndex = -1; 

node.addEventListener("focus", function() { 
    // clicked the element... 
}, true); 

node.addEventListener("blur", function() { 
    // clicked away from the element... 
}, true); 

К сожалению, этот пример, вероятно, не будет работать в IE. Я не тестировал его сам, так и может!

Кроме того, tabIndex-1 означает, что элемент можно щелкнуть, но не может сфокусироваться на клавиатуре. Вы можете изменить его на 0, если вы хотите, чтобы его можно было сфокусировать с помощью Tab или Shift+Tab.

Answer 6

Из того, что я исследовал, я думаю, что функция stopPropagation является наиболее подходящей. Например:

$("#something_clickable a").click(function(e) { 
    e.stopPropagation(); 
}) 

См How do I prevent a parent's onclick event from firing when a child anchor is clicked? по аналогичному вопросу.