通过单击元素设置焦点，但不包括某些子项

setting focus by clicking on element but excluding some children

本文关键字：不包括 单击 元素 设置 焦点      更新时间：2023-09-26

我想在每次点击 .step 时关注元素 .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();
});

在 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 上的一个示例。

然而，正如Gupta所说，focus函数仅适用于<input>、<select>和<a>标签。

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

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

与 不同 

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

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

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

此外，$(this)将始终是捕获点击事件.stepdiv，而不是它的任何子级。

相关文章：