嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2014-04-30 2695 次浏览 标签 : javascript

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

<label>
    <input type="checkbox"  name="PHP" value="PHP">
    <span>PHP</span>
</label>
<script type="text/javascript">
	$("label").click(function(event){
		event.preventDefault();
		console.log(1);//如果没有上面的阻止默认事件,则会打印两次
	})
</script>

官方链接:http://api.jquery.com/event.preventDefault/

上面的代码中,如果没有阻止默认事件,则会导致下面的1打印两次,为什么会这样呢?

以下面的代码为例子分析:

<label>
    <input type="checkbox"  name="PHP" value="PHP">
    <span>PHP</span>
</label>
<script type="text/javascript">
	$("input").click(function(){
		console.log('input clicked');
	})
	$("span").click(function(){
		console.log('span clicked');
	})
</script>

这种情况下点击span,会因为label的关系,导致其默认事件就是触发checkobx的勾选,实际就是代理了input框的点击事件。而inputlable的子元素,所以点击input,会触发$("lable").click(function(){...})

现在再看:

<label style=" background: #ddd; width: 100px; display: block; ">
    <input type="checkbox"  name="PHP" value="PHP">
</label>
<script type="text/javascript">
	$("label").click(function(event){
		console.log($(this));
		console.log(event.target);
	})
</script>

原理一样,不解释了,点击labelinput的结果如图:

关于jquery里的event.preventDefault()

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表

回复 daijie 2014-04-30 15:41:55
事件冒泡