Question

制作了这个例子：https://jsfiddle.net/d8ak0edq/2/

＆＃13;

document.getElementById('outer').oncontextmenu = function() { return false; };

outer = document.getElementById('outer');
outer.addEventListener('mousedown', foo);
function foo(evt) {
  if (evt.which === 1) {
    evt.target.style.backgroundColor = 'red';
  } else if (evt.which === 3) {
    evt.target.style.backgroundColor = 'blue';
  }
}
/*
$outer = $('#outer');
$outer.on('mousedown', 'div', foo);
function foo(evt) {
  if (evt.which === 1) {
    $(this).css('background-color', 'red');
  } else if (evt.which === 3) {
    $(this).css('background-color', 'blue');
  }
} */

＆＃13;

#outer {
  border: 2px solid black;
  width: 300px;
  height: 300px;
}
#inner {
  position: relative;
  left: 25%;
  top: 25%;
  border: 2px solid black;
  width: 150px;
  height: 150px;
}

＆＃13;

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <div id="outer">
        <div id="inner">
        
        </div>
      </div>


        <script src="js/vendor/modernizr-3.5.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

＆＃13;

正如你所看到的，jQuery有一个很好的方法，第二个参数设置＆＃39; target＆＃39;和＆＃39;这个＆＃39;如果单击外部div，即使事件处理程序位于外部div上也不会发生任何事情。

如何在没有jQuery的情况下制作它？

所以通过在内部制作事件处理程序显然会＃34;修复＆＃34;问题，但我希望事件保留在外部div上，但只针对内部，如何使这项工作（而不是通过添加&& !(evt.target===outer)）？

Answer 1

委托的基本技巧是：在内部设置一个可选属性，然后将事件处理程序附加到外部，然后检查事件是否来自内部：

document.getElementById('outer').addEventListener('mousedown' function(outer_evt) {
    if (outer_evt.target.id == 'inner') {
        // I mousedowned on inner
    }
});

如果您有其他事件附加到outer（这包括附加到outer 的任何祖先的事件），并且不希望它们在您开火时被解雇内部事件，分别使用outer_evt.stopImmediatePropagation()和/或outer_evt.stopPropagation()。

如果你想引用事件冒泡的元素，那就是.currentTarget。（即上面，outer_evt.currentTarget === document.getElementById('outer')）

另见EventTarget.addEventListener()

没有jQuery

1 个答案: