div中组件的单个操作

Question

我有一个<div>我将拥有多个组件，首先如果我点击任何组件，应该触发相应的操作，之后该div中的其他组件点击事件不应该触发，除非否则鼠标移出<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后再次点击。

看到这个小提琴：

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

为了使这更加通用，以下是将此逻辑应用于n

中的.parent元素的方法

$(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

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

$(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