Javascript事件Onclick
[英]Javascript Event Onclick
问题描述
Q1) i have written the javascript code below in which i put the onClick event and in the last parameter of the addEventListener i put the 'true' for capturing but still in console you can see bubbling is true, secondly the target at onClick remains same on both true, false parameter ie (img object), you can check at your own pc kindly help me out of this confusion. 
Q1）我写了下面的javascript代码，在其中放置了onClick事件，在addEventListener的最后一个参数中，我放置了“ true”以进行捕获，但仍在控制台中可以看到冒泡是真的，其次，onClick的目标保持不变无论是正确的还是错误的参数（即（img对象）），您都可以在自己的PC上进行检查，以帮助我摆脱这种困惑。
document.querySelector('.grid').addEventListener('click', function (e) { console.log(e); console.log(e.target.id + " " + this.className); },true)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Events</title> <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <div id="art"> <h2>Art Eliminator</h2> <p>Pick your favorite piece of art through the process of elimination. Click on the pieces you like the least until you are left with a single one. Click on the last image to get some info</p> <ul class="grid"> <li id="li-1"><img src="images/Hassum_Harrod_03_tn.jpg" id="img1" alt="Hassum Harod's Summer Trees"></li> <li id="li-2"><img src="images/LaVonne_LaRue_02_tn.jpg" id="img2" alt="LaVonne LaRue's Mighty Duck"></li> <li id="li-3"><img src="images/Lorenzo_Garcia_01_tn.jpg" id="img3" alt="Lorenzo Garcia's The Dancer"></li> <li id="li-4"><img src="images/Jennifer_Jerome_01_tn.jpg" id="img4" alt="Jennifer Jerome's A day of Rest'"></li> <li id="li-5"><img src="images/Constance_Smith_03_tn.jpg" id="img5" alt="Constance Smith's Letterforms"></li> <li id="li-6"><img src="images/LaVonne_LaRue_04_tn.jpg" id="img6" alt="LaVonne LaRue's Flow"></li> <li id="li-7"><img src="images/Lorenzo_Garcia_03_tn.jpg" id="img7" alt="Lorenzo Garcia's Mother"></li> <li id="li-8"><img src="images/Jennifer_Jerome_02_tn.jpg" id="img8" alt="Jennifer Jerome's Farm Life"></li> <li id="li-9"><img src="images/Hillary_Goldwynn_03_tn.jpg" id="img9" alt="Hillary Goldwynn's Blue Sky"></li> </ul> </div> <script src="script.js"></script> </body> </html>
Q2) In my other code when i put onclick event at one element (div) but it works on all element (div) why and how ? Q2）在我的其他代码中，当我将onclick事件放在一个元素（div）上但对所有元素（div）起作用时，为什么以及如何执行？
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Events</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="grid"> <li><img src="images/ylw.gif" alt="yellow"></li> <li><img src="images/org.gif" alt="orange"></li> <li><img src="images/ppl.gif" alt="purple"></li> <li><img src="images/blu.gif" alt="blue"></li> <li><img src="images/pnk.gif" alt="pink" id="pink"></li> <li><img src="images/grn.gif" alt="green"></li> <li><img src="images/ygr.gif" alt="ygreen"></li> <li><img src="images/gry.gif" alt="gray"></li> <li><img src="images/red.gif" alt="red"></li> </ul> <div class="d1">1 <!-- the topmost --> <div class="d2">2 <div class="d3">3 <!-- the innermost --> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> var divs = document.getElementsByTagName('div'); for(var i =0; i<divs.length; i++){ divs[0].onclick = function(event){ event = event || window.event; var target = event.target || event.srcElement; this.style.backgroundColor='yellow' // e.stopPropagation(); // if(event.stopPropagation){ // event.stopPropagation(); // } // else if(event.cancelBubble()){ // event.cancelBubble; // } alert("Target " + target.className + ",this " + this.className); } } </script> </body> </html>
1 个解决方案
解决方案1
0 2017-01-24 07:41:59
I think u did a small mistake here.. use "event.stopPropagation();" 我认为您在这里犯了一个小错误。使用“ event.stopPropagation（）;” instead of "e.stopPropagation();" 而不是“ e.stopPropagation（）;”
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Events</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="grid"> <li><img src="images/ylw.gif" alt="yellow"></li> <li><img src="images/org.gif" alt="orange"></li> <li><img src="images/ppl.gif" alt="purple"></li> <li><img src="images/blu.gif" alt="blue"></li> <li><img src="images/pnk.gif" alt="pink" id="pink"></li> <li><img src="images/grn.gif" alt="green"></li> <li><img src="images/ygr.gif" alt="ygreen"></li> <li><img src="images/gry.gif" alt="gray"></li> <li><img src="images/red.gif" alt="red"></li> </ul> <div class="d1">1 <!-- the topmost --> <div class="d2">2 <div class="d3">3 <!-- the innermost --> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> var divs = document.getElementsByTagName('div'); for(var i =0; i<divs.length; i++){ divs[i].style.backgroundColor='white'; divs[i].onclick = function(event){ event = event || window.event; var target = event.target || event.srcElement; this.style.backgroundColor='yellow'; event.stopPropagation(); if(event.stopPropagation){ event.stopPropagation(); } else if(event.cancelBubble()){ event.cancelBubble; } alert("Target " + target.className + ",this " + this.className); } } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript 中的 onclick 事件函数 - onclick event function in JavaScript
JavaScript onclick事件问题 - JavaScript onclick Event Problem
JavaScript onclick事件无效 - JavaScript onclick event is not working
Javascript附加到onClick事件 - Javascript append to onClick event
Javascript onclick事件未附加 - Javascript onclick event not attaching
具有onClick事件的Javascript链接 - Javascript link with onClick event
使用 JavaScript 启用 onclick 事件 - Enable onclick event with JavaScript
Javascript 禁用。onClick 事件 - Javascript disabling .onClick event
使用 JavaScript 处理 onclick 事件 - Working with a JavaScript for a onclick event
jsp 中的 JavaScript onclick 事件 - JavaScript onclick event in a jsp
相关标签