Question

我想在每次点击.step时关注element .editor。问题是我想排除点击按钮：.new，.delete，.copy，.resize。如果我点击按钮，我没有聚焦，只是单独执行其他功能设置。我怎样才能做到这一点。这是html结构：

<div class="step">
 <div class="editor"></div>
   <div class="new"></div>
   <div class="delete"></div>
   <div class="copy"></div>
   <div class="resize"></div>
</div>

这是我错误的jQuery：

$(document).on('click', '.step', function() {
    if ( $(this)  !== $(".sort-slides") || $(".draggable_on") || $(".copy-slide") || $(".new-slide") || $(".delete-slide")  )
    $(this).find(".editor").focus();
});

Answer 1

首先，你的if语句不正确。

if (x == 1 || 2 || 3 || 4 || 5) { ... }

与

不同

if (x == 1 || x == 2 || x == 3 || x == 4 || x == 5) { ... }

该语句将始终返回true，因为除0之外的任何内容都将是真实的。所以即使x为0，语句也是

if (false || true || true || true || true) { ... }

此外，$(this)将永远是.step div捕获点击事件，而不是任何孩子。

Answer 2

在JavaScript中，当一个事件触发一个元素时，它会在每个元素的祖先上触发。这称为事件传播。可以通过从事件处理程序返回false来停止此行为。

$(".new, .delete, .copy, .resize").click(function(event) {

  // do something
  alert("click");

  // prevent the event from propagating
  return false;
});

$(".step").click(function() {

  // do something
  alert("focus");
});

这是CodePen上的example。

但是，正如Gupta所说，focus功能仅适用于<input>，<select>和<a>代码。

通过单击元素设置焦点但排除一些孩子

2 个答案: