event.stopPropagation()、event.preventDefault()とreturn falseの違い
14499 ワード
小さいdemoをする時よくreturn falseを使ってデフォルトのイベントをキャンセルして、しかしずっとそれとpreventDefault()などの区別がよく分からないで、今日ドキュメントと大神達のブログを調べて、ここで関連知識点に対して1つの総括をします
まずドアを開けて、この3つの違いをまとめます.
event.stopPropagation():イベントのバブルを阻止し、デフォルトのイベントに影響を与えません.
event.preventDefault():イベントバブルに関係なく、デフォルトのイベントをブロックします.
return false:オリジナルjsではデフォルトイベントをブロックし、jQueryではデフォルトイベントとイベントバブルをブロックします.
このように理解するとはっきりしないかもしれませんが、aラベルのデフォルトイベントの一つはリンクをクリックしてジャンプするため、これに関連する小さなdemoを作って印象を深めましょう.
まずドアを開けて、この3つの違いをまとめます.
event.stopPropagation():イベントのバブルを阻止し、デフォルトのイベントに影響を与えません.
event.preventDefault():イベントバブルに関係なく、デフォルトのイベントをブロックします.
return false:オリジナルjsではデフォルトイベントをブロックし、jQueryではデフォルトイベントとイベントバブルをブロックします.
このように理解するとはっきりしないかもしれませんが、aラベルのデフォルトイベントの一つはリンクをクリックしてジャンプするため、これに関連する小さなdemoを作って印象を深めましょう.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
div{width: 100px;height: 100px;border: 1px solid #ccc;}
div a{display: block;width: 30px;height: 100px;background: skyblue;}
style>
head>
<body>
<div id="box1">
<a href="http://www.baidu.com">a>
div>
<div id="box2">
<a href="http://www.baidu.com">a>
div>
<div id="box3">
<a href="http://www.baidu.com">a>
div>
<div id="box4">
<a href="http://www.baidu.com">a>
div>
<div id="box5">
<a href="#">a>
div>
<script>
/*event.stopPropagation()&&event.preventDefault()&&return false*/
box1.onclick=function(){
console.log("parent");
}// ，
/*event.stopPropagtion()， ， */
box2.onclick=function(){
console.log("parent");
}
box2.children[0].onclick=function(event){
event.stopPropagation();// ，
}
/*event.preventDefault(), ， */
box3.onclick=function(){
console.log("parent");
}
box3.children[0].onclick=function(event){
event.preventDefault();// parent，
}
/*return false; ， ， event.preventDefault()， jQuery ，
*/
box4.onclick=function(){
console.log("parent");
}
box4.children[0].onclick=function(){
return false;
}script>
body>
html>