Javascript 事件 Onclick答案

【问题标题】：Javascript Event OnclickJavascript 事件 Onclick
【发布时间】：2017-01-24 07:25:08
【问题描述】：

Q1) 我已经编写了下面的 javascript 代码，我在其中放置了 onClick 事件，并且在 addEventListener 的最后一个参数中，我将“true”用于捕获，但仍然在控制台中您可以看到冒泡是真的，其次是目标onClick 在真假参数（即img 对象）上保持不变，您可以在自己的电脑上检查，请帮助我摆脱这种困惑。

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>

【问题讨论】：

你的问题到底是什么？
在第一个问题中，当我在两种情况下将最后一个参数设置为 true 或 false 时，目标保持不变，即 img 对象为什么？在第二个问题中，有许多 div 元素，但我将 onclick 事件放在一个 div 上，但它适用于所有 div，您可以单击所有 div，然后它会在警报中生成结果

标签： javascript parameters onclick

【解决方案1】：

我认为你在这里犯了一个小错误.. 使用“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>

【讨论】：