Клик против Jquery мыши против dispatchEvent нажмите

Может кто-нибудь объяснить мне, почему фактической мыши и $ («DIV»). Нажмите() пробеги нажмите событие в 3 раза, а $ («DIV») [ 0] .dispatchEvent (новый MouseEvent ('click')) запускает событие click только 1 раз в соответствии с консолью браузера?Клик против Jquery мыши против dispatchEvent нажмите

Вот простой HTML код:

<div>test</div>

Вот Javascript код:

$('*').click(function(e){ 
    console.log(e); 
}); 

var c = new MouseEvent('click'); 

// Actual mouse click output event 3 times 
//$('div').click(); // output event 3 times 
$('div')[0].dispatchEvent(c); // output event 1 time

http://jsfiddle.net/5uvjwa4t/2/

Благодаря

источник

2015-08-14 diurii

Поскольку в 'dispatchEvent' вы указали' div' и в 'click' вы выбираете все, используя теги' * '(включая html & body) + div. –

Звездочка соответствует <html> и <body теги, а также, и как пузырь событий события пузырь он запускается на трех элементах, когда вы используете звездочку в качестве селектора для обработчика события.

$('*') // matches all elements, including html and body 

$('div') // matches the DIV only

Когда вы стреляете щелчок на DIV, который вложен как этот

<html> 
    <body> 
     <div>

Щелчок перемещается вверх (пузыри) и пожаров на всех родительских элементов, а также.

Использование dispatchEvent запускает событие три раза для меня в Chrome, но в других браузерах могут быть различия.
Чтобы сделать его последовательно пузырь, можно установить настройку bubbles, таким образом, он будет вести себя как обычный щелчок и пузырь.

var c = new MouseEvent('click', {bubbles:true});

источник

2015-08-14 13:02:11 adeneo

Отлично, ** {bubbles: true} ** вот что я искал! – diurii

Клик против Jquery мыши против dispatchEvent нажмите

ответ

Смежные вопросы