div 中组件的单个操作

Question

我有一个 <div>，其中我将有多个组件，首先，如果我单击任何组件，应触发相应的操作，然后在该 [=36] 内没有其他组件单击事件=] 不应触发，除非鼠标移出 <div> 边界线并再次返回。

我使用了 .one() JQuery 功能，但这会阻止进一步点击

谁能告诉我一些解决方案

JSFiddle

html

<div class='parent' style="width:100px;border:2px solid blue">
    <button id="myButton">Click Me</button>
    <a href="#">Click Me Too</a>
</div>

脚本

$(document).ready(function() {
  $("#myButton").one("click", function(){
         console.log('button click....');
    });
});

Answer 1

我不确定我是否理解正确：

据我所知，您希望在离开父项后能够再次单击 div。

看到这个fiddle:

http://jsfiddle.net/8qx5yxe6/1/

$(document).ready(function() {

var clickable = true;

 $("#myButton").on("click", function(){
  if(clickable) {
        console.log('clicked....');
      clickable = false;
  }

});

$(".parent").on("mouseleave", function() {
      clickable = true;
});
});

Answer 2

您可以手工重新附加事件处理程序。这是一个例子

$(document).ready(function() {

    attachHandle = function() {
        $('#myButton').one('click', function(){
             console.log('clicked....');
        });
    }

    $('.parent').on('mouseleave', function() {
        $('#myButton').off('one');
        attachHandle();
    });

    attachHandle();
});

JSFiddle Link

编辑 1

为了使这个稍微更通用，这里有一种方法可以将此逻辑应用于 .parent

中的 n 个元素

$(document).ready(function() {
    attachHandle = function() {        
        $('.parent').children().each(function(){
            $(this).one('click', function(){
                 console.log('clicked....');
            });
        });
    }

    $('.parent').on('mouseleave', function() {
        $(this).children().each(function(){
            $(this).off('one')
        })
        attachHandle();
    });
    attachHandle();
});

Updated JSFiddle Link

编辑 2

要在 .Parent 内允许每个兄弟元素一个 click，请参考以下内容

$(document).ready(function() {

    attachHandle = function() {        
        $('.parent').children().each(function(){
            $(this).one('click', function(){
                $(this).siblings().off('click');
                 console.log('clicked....');
            });
        });
    }

    $('.parent').on('mouseleave', function() {
        attachHandle();
    });
    attachHandle();
});

Third JSFiddle