為什么span的點擊失效
<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<style>
????.left?div,
????.right?div?{
????????width:?500px;
????????height:?100px;
????????padding:?5px;
????????margin:?5px;
????????float:?left;
????????border:?1px?solid?#ccc;
????}
????
????.left?div?{
????????background:?#bbffaa;
????}
????
????.right?div?{
????????background:?yellow;
????}
????</style>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
????<h3>事件對象的屬性與方法</h3>
????<div?class="left">
????????<div?id="content">
????????????外層div元素
????????????<br?/>
????????????<span?style="background:?silver;">內層span元素</span>
????????????<br?/>?外層div元素
????????</div>
????????<br?/>
????????<div?id="msg"></div>
????</div>
????<script?type="text/javascript">
????//為?<span>?元素綁定?click?事件??
????$("span").click(function()?{
????????$("#msg").html($("#msg").html()?+?"<p>內層span元素被單擊</p>");
????});
????//為?Id?為?content?的?<div>?元素綁定?click?事件??
????$("#content").click(function(event)?{
????????$("#msg").html("<p>外層div元素被單擊</p>");
????????event.stopPropagation();?//阻止事件冒泡??
????});
????//為?<body>?元素綁定?click?事件??
????$("body").click(function()?{
????????$("#msg").html($("#msg").html()?+?"<p>body元素被單擊</p>");
????});
????</script>
</body>
</html>為什么刪掉#content里的 ?$("#msg").html() ?后span點擊失效了????
2016-09-12
我按你說的試了一下，不是點擊沒反應了，是被覆蓋了，我是在里面加了兩句alert()的調試語句一下原因就出來了。
點擊span后，綁在span上的事件觸發，出現兩行話，因為冒泡，綁在content上的事件也觸發，又把那兩句話覆蓋，這兩個動作很快，就像那句話都沒變一樣，你看不懂的話，自己試下，我也是剛學，互幫互助更快成長哦。。。
?$("span").click(function() {
? ? ? ? alert('111');
??????? $("#msg").html($("#msg").html() + "<p>內層span元素被單擊</p>");
??? });
??? $("#content").click(function(event) {
? ? ? ? ?alert('222');
? ? ? ? $("#msg").html("<p>外層div元素被單擊</p>");
???????? event.stopPropagation(); //阻止事件冒泡 ?
??? });
2016-11-13
大神，能解答一下：瀏覽器的默認行為有哪些？有哪些事件可以觸發瀏覽器的默認行為？
2016-09-09
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
??? <title></title>
??? <style>
??? .left div,
??? .right div {
??????? width: 500px;
??????? height: 100px;
??????? padding: 5px;
??????? margin: 5px;
??????? float: left;
??????? border: 1px solid #ccc;
??? }
?? ?
??? .left div {
??????? background: #bbffaa;
??? }
?? ?
??? .right div {
??????? background: yellow;
??? }
??? </style>
??? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
??? <h3>事件對象的屬性與方法</h3>
??? <div class="left">
??????? <div id="content">
??????????? 外層div元素
??????????? <br />
??????????? <span style="background: silver;">內層span元素</span>
??????????? <br /> 外層div元素
??????? </div>
??????? <br />
??????? <div id="msg"></div>
??? </div>
??? <script type="text/javascript">
??? //為 <span> 元素綁定 click 事件 ?
??? $("span").click(function() {
??????? $("#msg").html($("#msg").html() + "<p>內層span元素被單擊</p>");
??? });
??? //為 Id 為 content 的 <div> 元素綁定 click 事件 ?
??? $("#content").click(function(event) {
?????? // $("#msg").html($("#msg").html() + "<p>外層div元素被單擊</p>");
???????? event.stopPropagation(); //阻止事件冒泡 ?
??? });
??? //為 <body> 元素綁定 click 事件 ?
??? $("body").click(function() {
??????? $("#msg").html($("#msg").html() + "<p>body元素被單擊</p>");
??? });
??? </script>
</body>
</html>
你的意思是這樣的代碼？ span標簽的事件不起作用了？這是沒有問題的！
2016-09-09
?event.stopPropagation()阻止了事件的發生