目錄
回复内容:
首頁 後端開發 php教程 javascript - addEventListener注册了多个相同事件,如何让其中一个触发,其他的失效??

javascript - addEventListener注册了多个相同事件,如何让其中一个触发,其他的失效??

Jul 06, 2016 pm 01:52 PM
html javascript php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<code>html:

<div id="p">

  <div id="c"></div>

</div>

 

css:

 #p {width:300px;height:300px;border:1px solid blue;}

 #c {width:30px;height:30px;background-color:red;}

 

js:

var p=document.getElementById('p');

var c=document.getElementById('c');

 

registerParentEvent();

registerChildEvent();

 

// 注册父元素事件

function registerParentEvent(){

  p.addEventListener('mousedown',function(e){

   e.stopPropagation();

   console.log('你点击了父元素');

  },false);

 

  window.addEventListener('mouseup',function(){

    console.log('你离开了父元素!');

  },false);

}

 

// 注册子元素事件

function registerChildEvent(){

  c.addEventListener('mousedown',function(e){

   e.stopPropagation();

   console.log('你点击了子元素');

  },false);

 

  window.addEventListener('mouseup',function(){

    console.log('你离开了子元素!');

  },false);

}

</code>

登入後複製
登入後複製

在父元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!

在子元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!

由于 mouseup 事件注册在 window 上,但是,我需要的效果是,让其能够有分辨力,当鼠标点击的是父元素时,触发的便是和父元素配套的内容,点击子元素时,触发的便是和子元素配套的内容。

回复内容:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<code>html:

<div id="p">

  <div id="c"></div>

</div>

 

css:

 #p {width:300px;height:300px;border:1px solid blue;}

 #c {width:30px;height:30px;background-color:red;}

 

js:

var p=document.getElementById('p');

var c=document.getElementById('c');

 

registerParentEvent();

registerChildEvent();

 

// 注册父元素事件

function registerParentEvent(){

  p.addEventListener('mousedown',function(e){

   e.stopPropagation();

   console.log('你点击了父元素');

  },false);

 

  window.addEventListener('mouseup',function(){

    console.log('你离开了父元素!');

  },false);

}

 

// 注册子元素事件

function registerChildEvent(){

  c.addEventListener('mousedown',function(e){

   e.stopPropagation();

   console.log('你点击了子元素');

  },false);

 

  window.addEventListener('mouseup',function(){

    console.log('你离开了子元素!');

  },false);

}

</code>

登入後複製
登入後複製

在父元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!

在子元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!

由于 mouseup 事件注册在 window 上,但是,我需要的效果是,让其能够有分辨力,当鼠标点击的是父元素时,触发的便是和父元素配套的内容,点击子元素时,触发的便是和子元素配套的内容。

window 只需要绑定一次即可,通过 event.target 来判断事件触发者。

1

2

3

<code>window.addEventListener('mouseup',function(e){

    console.log('你离开了: ' + e.target.id);

},false);</code>

登入後複製

常规的写法:

1

2

3

4

5

6

7

<code>p.addEventListener('mousedown',function down(e){

   window.addEventListener('mouseup',function up(){

    window.removeEventListener('mouseup', up);

    //p=&gt;up

  });

    //p=&gt;down

});</code>

登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南

CakePHP 日期和時間 CakePHP 日期和時間 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和時間

CakePHP 專案配置 CakePHP 專案配置 Sep 10, 2024 pm 05:25 PM

CakePHP 專案配置

CakePHP 檔案上傳 CakePHP 檔案上傳 Sep 10, 2024 pm 05:27 PM

CakePHP 檔案上傳

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

討論 CakePHP 討論 CakePHP Sep 10, 2024 pm 05:28 PM

討論 CakePHP

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

See all articles