Как выполнить действие, только если в Javascript / jQuery нет значения по умолчанию? - PullRequest
Новая
       0

Как выполнить действие, только если в Javascript / jQuery нет значения по умолчанию?

3 голосов
/ 30 июня 2010

Меня просят, чтобы щелчок в любом месте в div выполнял определенное действие (скажем, свернуть его) , если клик не был по ссылке, кнопке и т. Д. *

По сути, я бы хотел использовать обратную переменную event.preventDefault().

Есть ли хороший и простой способ сделать это?

Я ищу универсальное решение здесь; Я бы не хотел много думать о содержании div.

Может выглядеть так: 

<div id="click_me>
<p>Clicking here should do stuff
   <a href="http://stackoverflow.com">but not here, nor on the following image</a>
   <a href="/xyz"><img url="/icon.png"/></a>
   imagine buttons... input areas, ...
</p>
</div>

Со следующим Javascript: 

$("#click_me").click(function(){
  if(black_magic) {
    $("#click_me").toggleClass("collapsed");
  }
});

Ответы [ 4 ]

4 голосов
/ 30 июня 2010

Вы просто должны убедиться, что событие target не является ни ссылкой, ни кнопкой. 

$('#click_me').click(function(e) {
  interactive = 'a, button, input, textarea, video, map, object';
  if($(event.target).closest(interactive).length == 0) ) {
    $("#click_me").toggleClass("collapsed");
  }
});
2 голосов
/ 30 июня 2010

Просто добавьте этот обработчик к вашей ссылке: 

$("#click_me a,button,input,textarea,video,map,object").click(function(e){
   e.stopPropagation();
});

Чтобы предотвратить попадание события в div (всплывающее). Он остановится, поэтому ссылка будет работать правильно.

См. Это в действии. (просмотр клика)

1 голос
/ 30 июня 2010

Event bubbling является ключевым словом здесь. Свяжите обработчик событий с div и отметьте event target, чтобы указать, что делать. 

$('div.mydivclass').bind('click', function(event){
    switch(event.target.id){
        case 'id_of_an_anchor':{
              alert('anchor was clicked');
              break;
        }
        case 'id_of_a_span':{
              alert('span was clicked');
              break;
        }
        default: {
              alert('something else was clicked within me');
        }
    }
});

Конечно, вы можете даже проверить цели tagName или nodeType.

0 голосов
/ 01 июля 2010 
function onClick(e){
    var gates = "A,INPUT,TEXTAREA,SELECT";
    var bound = this;
    var isCollapse = function ( node ){ 
    if( node == bound ){ return true; }
        var re = new RegExp( "\\b" +node.nodeName+ "\\b", "g" );
        return re.test( gates ) ? false : isCollapse( node.parentNode );
    };

    if( isCollapse( event.srcElement || e.target ) ){
        alert( "collapse" )
        // collapse()
    }
}
document.getElementById("click_me").onclick = onClick;

* исправлено * для таких случаев, как: <a href="_"><span><strike> a link </strike></span></a>

...