jQuery最接近（）在Chrome中的行为不同？答案

【问题标题】：jQuery closest() behaving differently in Chrome?jQuery最接近（）在Chrome中的行为不同？
【发布时间】：2016-10-31 20:11:52
【问题描述】：

我想要达到的目标

我的页面上有一个按钮和一些画布元素，当我单击该按钮或画布元素时，覆盖 div (#add-elements) 将滑入。当我单击其他位置时（不在覆盖上div，而不是按钮而不是画布元素）覆盖 div 将消失。使用 Firefox 和 IE，使用 jQuery 的 closest() 的解决方案可以正常工作：

if (!$(event.target).closest('#add-elements').length
    && !$(event.target).closest('#show-button-wrapper').length
    && !$(event.target).closest('.gui-element').length) {
    hideEditPanel(); // this hides the overlay div
}

现实问题

但是在 Chrome 中，即使我单击按钮，hideEditPanel() 也会被调用。我做了一些控制台输出，!$(event.target).closest('#show-button-wrapper').length 在 Chrome 中是 true，但在 Firefox 和 IE 中是 false。

我的 DOM 结构

<html>
    <head>
    </head>
    <body>
        <div id="page">
            <div id="main">
                <div id="content">
                    <div id="add-elements">
                    </div>
                    <div id="show-button-wrapper">
                        <button id="show-button">show panel</button>
                    </div>
                    <div id="bigcanvas">
                        <canvas id="first" class="gui-element"></canvas>
                    </div>
                </div> <!-- #content -->
            </div> <!-- #main -->
        </div> <!-- #page -->
    </body>
</html>

任何帮助将不胜感激。

更新

event.target 在 Chrome 中是 <span class="ui-button-text">，在 Firefox 中是按钮元素本身。当我单击 Chrome 中按钮的边缘时（强制目标成为按钮元素，而不是内部的跨度），它似乎可以工作。

【问题讨论】：

为什么在 ID 上使用最接近的。 ID 必须是唯一的。请点击编辑器中的<>按钮并发布[mvce]
直接访问ID更快，更简单
如何检查被点击的父元素之一是否有特定的ID？

标签： javascript jquery cross-browser

【解决方案1】：

也许这种方法适合你：

$(document.body).on('click', function(e){
  var t = $(e.target).closest('#content');
  if (!t.length) {
    $('#add-elements').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
    </head>
    <body>
        <div id="page" style="border:3px solid #000">page
            <div id="main" style="border:3px solid #f00">main
                <div id="content" style="border:3px solid #0f0">content
                    <div id="add-elements" style="border:3px solid #00f">add-elements
                    </div>
                    <div id="show-button-wrapper" style="border:3px solid #888">
                        <button id="show-button">show panel</button>
                    </div>
                    <div id="bigcanvas" style="border:3px solid #f0f">bigcanvas
                        <canvas id="first" class="gui-element"></canvas>
                    </div>
                </div> <!-- #content -->
            </div> <!-- #main -->
        </div> <!-- #page -->
    </body>
</html>

【讨论】：

如果我理解正确，如果点击发生在#content 之外，您的代码将隐藏#add-elements div。但这并不是我打算做的。如果单击发生在既不是按钮也不是 div 也不是canvas.gui-element 的元素上，我想隐藏#add-elements div（我有几个，但为了简化代码 sn-p 我省略了其他元素）
PS：$(e.target).closest('#content') 应该等同于$('#content')
@elementzero23 我假设
只有您不想对点击做出反应的内容。所以点击外部和不点击画布、按钮等任何内容是一样的。

【解决方案2】：

我想你的意思可能是：

$("#content").on("click",function(e)  {
  if (["div","canvas"].indexOf(e.target.tagName.toLowerCase()) ==-1) {
    hideEditPanel(); 
  }
});

【讨论】：