jQuery: два элемента, использующие одну и ту же функцию события - PullRequest
0 голосов
/ 20 июня 2011

Каков наилучший способ разделения одной функции между двумя разными обработчиками событий?Я хочу получить тот же результат, но некоторые зависимые от ситуации переменные должны будут быть определены в функции в зависимости от того, какой элемент был нажат.

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

ПРИМЕР

var onMyEvent = function(e){
    if(click triggered from 'a'){
        //do that 
    }  
    if(click triggered from 'div'){
        //do that
    } 
}


$('a').click(onMyEvent);
$('div').click(onMyEvent);

FIDDLE: http://jsfiddle.net/f6C92/

Ответы [ 5 ]

5 голосов
/ 20 июня 2011

Я думаю, что было бы несколько способов достичь этого, например, проверить переменную e для целевых объектов и т. Д., Но для вашего сценария самым простым и читаемым было бы использование функции is(), для которойВы можете передать любой селектор CSS, чтобы проверить, соответствует ли объект интереса.

var onMyEvent = function(e){
    if($(this).is('a')){
        //do that 
    }  
    if($(this).is('div')){
        //do that
    } 
}


$('a').click(onMyEvent);
$('div').click(onMyEvent);

Есть те, кто будет утверждать, что вышеизложенное требует ненужного обхода в jQuery, когда вы можете достичь того же самого путемтестирование this.tagName == 'A', но я обычно рекомендую также делегировать эти вещи в jQuery, из соображений совместимости с браузером.

Другой удобный способ - передать соответствующую информацию в виде данных события:

var onMyEvent = function(e){
    if(e.data.type == 'a'){
        //do that 
    }  
    ...
}


$('a').click({ type: 'a' }, onMyEvent);
$('div').click({ type: 'div' }, onMyEvent);
2 голосов
/ 20 июня 2011

Зависит от того, насколько сложны различия, но мне не очень нравится проверять тип элемента в обработчике. Я бы, наверное, сделал что-то вроде этого:

function doSomething(...){
  // do stuff
}


$('a').click(function(){
   // set some variables and send them as parameters to doSomething
   doSomething(...);
});

$('div').click(function(){
   // set some variables and send them as parameters to doSomething
   doSomething(...);
});

Где doSomething содержит общий код.

1 голос
/ 20 июня 2011
var onMyEvent = function(e){
    if(this.tagName == 'A'){
       alert("a");
    }  
    if(this.tagName == 'DIV'){
       alert("div");
    } 
}

$('a').click(onMyEvent);
$('div').click(onMyEvent);

Даже если это будет работать, на мой взгляд, лучше установить разные обработчики для каждого тега и вызывать одну и ту же функцию внутри него, как предложил kingjiv

1 голос
/ 20 июня 2011

Это должно сработать:

var onMyEvent = function(e) {
    if (this.tagName == "A") {
       alert("a");   
    } else if (this.tagName == "DIV") {
        alert("div"); 
    }
}
1 голос
/ 20 июня 2011

Свойство target события будет содержать элемент, по которому щелкнули. В этом обновленном скрипте я оповещаю id о выбранном элементе, используя e.target.id.

...