JQuery триггер действие на фокус или щелчок, но не оба - PullRequest
Новая
       56

JQuery триггер действие на фокус или щелчок, но не оба

10 голосов
/ 17 марта 2010

У меня есть этот пример кода: 

$myTrigger
    .click(function(e){
         alert('click');
    })
    .focus(function(e){
         alert('focus');
         $(this).click()
    })

Смысл в том, что я хочу, чтобы что-то случилось, когда вы нажимаете на $ myTrigger. Если, с другой стороны, вы нажимаете на нее с помощью клавиатуры (то есть фокусировки), я хочу, чтобы произошло то же самое, поэтому я прошу ее нажать.

Загвоздка в том, что если я нажму на нее, она также будет фокусироваться. Так что оба оповещения срабатывают.

Есть ли способ предотвратить отключение события фокуса при нажатии?

UPDATE:

Комментарий Аджма заставил меня подумать, что я, возможно, спрашиваю не то.

Вопрос: всегда ли событие click также вызывает фокусировку в javascript (и / или в jQuery?). Могу ли я предположить, что всякий раз, когда я хочу обрабатывать как щелчок мышью, так и вкладку с помощью клавиатуры, событие focus () будет обрабатывать оба?

Или это зависит от конкретного элемента, к которому я прикрепляю события? (В этом случае $ myObject является тегом привязки (ссылка).

Ответы [ 6 ]

12 голосов
/ 25 марта 2010

jQuery имеет встроенную функцию для этого, которая не использует все, что часто называют .one()

$mytrigger.one('click focus', function() { alert("event"); });

Это сработает только один раз, или вы можете выполнить повторную привязку, если хотите позже.

6 голосов
/ 25 февраля 2012

Чтобы активировать функцию click () для фокуса вкладки (и предотвратить двойное срабатывание click () при фокусировке при щелчке мыши), я сделал следующее: 

$('#item').mousedown(function(){
    $(this).data("mouseDown", true);
});

$('#item').mouseup(function(){
    $(this).removeData("mouseDown");
});

$('#item').focus(function(){
    if (!$(this).data("mouseDown"))
        $(this).click();
});

Это вам подходит?

1 голос
/ 07 марта 2016

Другой вариант: 

$myTrigger
    .mousedown(function(e) {
        e.preventDefault();  // don't grab focus
    })
    .click(function(e) {
         alert('click');
    })
    .focus(function(e) {
         alert('focus');
         $(this).click()
    });

Это оставит фокус клавиатуры там, где он был раньше, при нажатии кнопки, но при этом все же будет возможность фокусироваться на кнопке через Tab (или программно вызывать .focus() для нее).

0 голосов
/ 17 марта 2010

Чтобы дважды не вызывать фокус, установите переменную, чтобы определить, имеет ли элемент фокус. 

var hasFocus = false;
$('#myTrigger').focusIn(
   function(){
      hasFocus = true;
      //do stuff
   }
);

$('#myTrigger').focusOut(
   function(){
      hasFocus = false;
   }
);

Поместите все функции в фокус и скажите jQuery установить фокус на элементе при нажатии, если вы запустили браузер, который этого не делает. 

$(#myTrigger).click( function(){ if(!hasFocus){$(#myTrigger).focus()}});
0 голосов
/ 17 марта 2010

Вы можете использовать только метод focus () и прочитать эту статью о типах событий (e) в JavaScript: http://www.quirksmode.org/js/events_properties.html

Чтобы определить, какое событие вы получили с помощью мыши или клавиатуры (чтобы проверить его), вы можете использовать: 

if (!e) var e = window.event;
alert(e.type);
0 голосов
/ 17 марта 2010

Я столкнулся с подобной проблемой некоторое время назад. Я решил ее , ответив на первое событие и проигнорировав события в течение следующих 20 мс.

Попробуйте что-то вроде этого: 

$(document).ready(OnReady);

var okToClick = true;

function OnReady() {
    //Attach to both click and focus events
    $("#item").click(PerformAction).focus(PerformAction);
}

function PerformAction() {
    if (okToClick) {
        okToClick = false;

        // Do something interesting here...

        setTimeout(function() { okToClick = true; }, 20);
    }
}
...