js 阻止事件冒泡和默认行为 if(event.target == this)、stopPropagation、preventDefault、return false

js 阻止事件冒泡和默认行为 if(event.target == this)、stopPropagation、preventDefault、return false

一、.点击,阻止冒泡事件、阻止默认行为

  1. if(event.target == this){}//阻止冒泡,阻止后代对你的影响【最优】
  2. event.stopPropagation();//阻止冒泡,阻止你对长辈元素的影响,但不能阻止后代元素对你的影响
  3. event.preventDefault();//阻止默认行为,eg:阻止a标签连接跳转
  4. return false;//JQuery中会阻止冒泡也会阻止默认行为。 但是使用原生js写时,return false只会阻止默认行为

二、举例说明
1. if(event.target == this){}

a.onclick =function(event){
 	if(event.target == this){
 	console.log('ddd')
	 }
 });

拓展:event(e)、element、this、event.target、event.currentTarget、tagName、nodeName,可以去了解下

2.stopPropagation();
stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如 在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如:

<div id='div'  onclick='alert("div");'>
   <ul  onclick='alert("ul");'>
      <li onclick='alert("li");'>test</li>
   </ul>
</div>

上面的代码,我们单击test时,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。

当我们需要阻止冒泡时,就得使用stopPropagation了

<div id='div'  onclick='alert("div");' >
   <ul  onclick='alert("ul");'>
      <li id='ul-a' onclick='alert("li");event.stopPropagation()'>a</li>
   </ul>
</div>

3.preventDefault();

preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接,提交按钮等。当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的。

我们都知道,链接的默认动作就是跳转到指定页面,下面就以它为例,阻止它的跳转:

//假定有链接
<a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>
var a = document.getElementById("testA");
a.onclick =function(event){
//阻止默认行为
event.preventDefault();
}

4.return false:

现在很多js代码都直接使用jQuery来写,在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。 但是使用原生js写时,return false只会阻止默认行为。下面两段代码说明

使用原生js方法时,return false只能阻止默认行为,但却不能阻止冒泡

<div id='div'  onclick='alert("div");'>
    <ul onclick='alert("ul");'>
        <li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testB">cnf2e.com</a></li>
    </ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
 return false;
};

使用jQuery方法时,return false会阻止默认行为,也会阻止冒泡

<div id='div'  onclick='alert("div");'>
<ul  onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testC">cnf2e.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
 return false;
});
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页