Hatena::Groupptech

ぷちてく RSSフィード

Archive
 
ProfileProfile

2017-03-05

element.click() が効かない時

04:17

ハマりそうなやつ。元記事はいわゆる Callback Hell 系の文脈

検証コードで安直に .click() したら効かなかった。

body = window.document.body;
body.onclick = () => {
  console.log('outer');
  body.onclick = () => {
    console.log('inner');
  };
  body.click();
};
body.click();
// -> outer
http://ptech.g.hatena.ne.jp/noromanba/20170302/1488491168#element-click-failed

内側 .click() 動かない。

回避策

a-kuma3

.dispatchEvent(MouseEvent) だと、内側も発火した >Firefox

const do_click = (e) => {
  const clickEvent = new MouseEvent("click", {
    view: window,
 });
 e.dispatchEvent(clickEvent);
};

body = window.document.body;
body.onclick = () => {
  console.log('outer');
  body.onclick = () => {
    console.log('inner');
  };
  do_click(body);
};
do_click(body);

<snip>

.click()setTimeout() でずらしても、発火した。

setTimeout(() => body.click(), 0)
http://ptech.g.hatena.ne.jp/noromanba/20170302#c1488502400

確かに両方返ってくる。

// -> outer
// -> inner

手元で試した setTimeout 版。

body = window.document.body;
body.onclick = () => {
  console.log('outer');
  body.onclick = () => {
    console.log('inner');
  };
  setTimeout(() => body.click(), 0);
};
body.click();
// -> outer
// -> undefined
// -> inner

これも両方動く。

感想

noromanba

> a-kuma3

検証 thx です。.dispatchEvent(MouseEvent) と timer 、確かに。Chromium 56.0.2924.76。

dblclick で動くわけでもないので、 ブラウザ側の tick/timer/job queu(e)ing あたりか .click() の仕様とか内部で気を効かせてそう。

http://ptech.g.hatena.ne.jp/noromanba/20170302#c1488736902

連打は?

noromanba

body = window.document.body;
body.onclick = () => console.log('ouch!');
for (i = 0; i < 10; i+=1) {
  body.click();
}
// -> (10) ouch!

えっ、ネストか

http://ptech.g.hatena.ne.jp/noromanba/20170302#c1488738344

書いたみたいに .click() 内部の debounce (throttle) とか、tick/timer/job queu(e)ing かと思ったんだけど、なんなんすかね。

どっかに書いてありそう。


環境

Chromium56.0.2924.76 (Developer Build) Built on Ubuntu , running on Ubuntu 16.04 (32-bit)
Revision314da7cc1e56fc9fa9271bac2b029922feb4b6f2
OSLinux
JavaScriptV8 5.6.326.42
User AgentMozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/56.0.2924.76 Chrome/56.0.2924.76 Safari/537.36
$ apt policy chromium-browser
chromium-browser:
  Installed: 56.0.2924.76-0ubuntu1.16.04.1271
  Candidate: 56.0.2924.76-0ubuntu1.16.04.1271
  Version table:
 *** 56.0.2924.76-0ubuntu1.16.04.1271 500
        500 http://ppa.launchpad.net/canonical-chromium-builds/stage/ubuntu xenial/main i386 Packages
        100 /var/lib/dpkg/status
トラックバック - http://ptech.g.hatena.ne.jp/noromanba/20170305

Copylight (c) noromanba 2012-2017