JS - stopPropagation and prevent default

最新推荐文章于 2024-05-08 10:00:07 发布

howlowl

最新推荐文章于 2024-05-08 10:00:07 发布

阅读量119

点赞数

分类专栏： WebDev

WebDev 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!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><a href="http://iviewsource.com"><img src="images/ylw.gif" alt="yellow"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/org.gif" alt="orange"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/ppl.gif" alt="purple"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/blu.gif" alt="blue"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/pnk.gif" alt="pink" id="pink"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/grn.gif" alt="green"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/ygr.gif" alt="ygreen"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/gry.gif" alt="gray"></a></li>
    <li><a href="http://iviewsource.com"><img src="images/red.gif" alt="red"></a></li>
  </ul>
<script>
  document.getElementById('grid').addEventListener('click', function(e) {
    e.preventDefault();
    console.log("Clicked inside the UL");
  }, true);

  document.getElementById('pink').addEventListener('click', function(e) {
    e.preventDefault();
    console.log(e.toElement.alt);
    e.stopPropagation();
  }, true);

</script>

</body>
</html>