Rumah > pembangunan bahagian belakang > tutorial php > javascript - addEventListener注册了多个相同事件,如何让其中一个触发,其他的失效??

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

WBOY
Lepaskan: 2016-07-06 13:52:46
asal
1639 orang telah melayarinya

<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>
Salin selepas log masuk
Salin selepas log masuk

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

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

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

回复内容:

<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>
Salin selepas log masuk
Salin selepas log masuk

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

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

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

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

<code>window.addEventListener('mouseup',function(e){
    console.log('你离开了: ' + e.target.id);
},false);</code>
Salin selepas log masuk

常规的写法:

<code>p.addEventListener('mousedown',function down(e){
   window.addEventListener('mouseup',function up(){
    window.removeEventListener('mouseup', up);
    //p=>up
  });
    //p=>down
});</code>
Salin selepas log masuk
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan