周梦康 发表于 2014-04-30 3489 次浏览 标签 : javascript
<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()

评论列表

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