Javascript事件Onclick
[英]Javascript Event Onclick
问题描述
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）在我的其他代码中，当我将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
我认为您在这里犯了一个小错误。使用“ event.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>
JavaScript 中的 onclick 事件函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.