jQuery $(e.target) 在 Chrome 和 IE11 中返回不同的东西答案

【问题标题】：jQuerys $(e.target) returns different things in Chrome and IE11jQuery $(e.target) 在 Chrome 和 IE11 中返回不同的东西
【发布时间】：2017-01-05 08:07:22
【问题描述】：

我为你制作了一个代码笔，让你看看行为不端的 IE11：

http://codepen.io/timkley/pen/rjamgP

基本设置是一个带有选择字段和按钮的表单。我想捕捉表单上的点击，并且只在未点击选择按钮时触发提交按钮。

<form class="form">
  <select class="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button class="button" type="submit">Hello</button>
</form>

还有 Javascript：

$(document).on('click', '.form', function(e) {
  console.log($(e.target));

  e.preventDefault();
});

基本上我所做的只是检查$(e.target).hasClass('select') 到return false。但这在 IE11 中不起作用，因为它不仅不返回 DOM 元素，而且还会触发 2 个单击事件。一个用于单击选择元素，一个用于选择选项。

如何确保两个浏览器的行为相同？

【问题讨论】：

似乎 XY 问题。你到底想达到什么目的？当您将 click 事件处理程序绑定到顶部元素时，子元素 click 将传播
您是否有理由监听整个表单的点击？
整个表单被设计成电子商务页面的按钮，因为它跨越了数量选择器的左侧和右侧。当点击此表单中的任何内容（数量选择器除外）时，应触发该按钮。

标签： jquery google-chrome internet-explorer-11

【解决方案1】：

不确定你为什么要走这条路，但你可以检测到目标的标签类型并从那里分支。

    $(document).on('click', '.form', function(e) {
      var $target = $(e.target);
      var tag = $target[0].tagName.toLowerCase();

      if(tag !== "select" && tag !== "option"){
        console.log(tag + " isn't a select or an option");
      } else {
        console.warn(tag + " was clicked");
      }
      e.preventDefault();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
  <select class="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button class="button" type="submit">Hello</button>
</form>

【讨论】：

【解决方案2】：

您可以使用 select 绑定另一个点击处理程序并使用 event.stopPropagation()

$(document).on('click', '.form', function (e) {
    e.preventDefault();
    console.log(e.target.tagName + ' is clicked.');
}).on('click', '.form select', function (e) {
    e.stopPropagation();
});

$(document).on('click', '.form', function(e) {
  e.preventDefault();
  console.log(e.target.tagName + ' is clicked.');
}).on('click', '.form select', function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
  <select class="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button class="button" type="submit">Hello</button>
</form>

或者，您可以使用.closest() 来测试e.target 是select 还是它的子元素。

$(document).on('click', '.form', function (e) {
    e.preventDefault();
    if ($(e.target).closest('select').length) {
        console.log('Select is clicked do nothing.');
    } else {
        console.log(e.target.tagName + ' is clicked.');
    }
});

$(document).on('click', '.form', function(e) {
  e.preventDefault();
  if ($(e.target).closest('select').length) {
    console.log('Select is clicked do nothing.');
  } else {
    console.log(e.target.tagName + ' is clicked.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
  <select class="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button class="button" type="submit">Hello</button>
</form>

【讨论】：