Question

我为你制作了一个可以看到行为不端的IE11的代码：

基本设置是一个带有选择字段和按钮的表单。我想抓住表单上的点击，如果没有点击选择按钮，则只触发提交按钮。

<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次点击事件。一个用于单击select元素，另一个用于选择选项。

如何在两种浏览器中确保相同的行为？

Answer 1

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

＆＃13;

    $(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();
    });

＆＃13;

<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>

＆＃13;

Answer 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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，您可以使用.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.');
    }
});

＆＃13;

$(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.');
  }
});

＆＃13;

<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>

＆＃13;

jQuerys $（e.target）在Chrome和IE11中返回不同的内容

2 个答案: