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

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

$(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 中的每个同级元素单击一次 ，请引用以下内容

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