Question

我想要实现的目标

我的页面上有一个按钮和一些画布元素，当我点击该按钮或画布元素时，叠加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()也会被调用。我在Chrome中创建了一些控制台输出，!$(event.target).closest('#show-button-wrapper').length为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>

任何帮助都将不胜感激。

更新

Chrome中的{p> event.target为<span class="ui-button-text">，Firefox中为按钮元素。当我点击Chrome中按钮的边缘（强制目标成为按钮元素，而不是内部的跨度）时，它似乎有效。

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

Answer 2

我想你可能意味着：

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

jQuery nearest（）在Chrome中表现不同？

2 个答案: