Question

我正在创建一个应用程序，我必须启用和禁用鼠标中心/离开并经常点击div。但是我遇到了一个问题，我使用了enable函数但这会导致它过早运行，而用户没有点击任何东西。

我有一个包含六个小div的外部div。当用户点击外部外部div时，较小的div将获得他们的mouseenter / leave和click事件，而outter div将被关闭。然后在点击一个小方框时反过来。

以下函数禁用并启用div的事件。

function enableHalve(){
            $("#top-wrapper, #bottom-wrapper").on({
                mouseenter: function (e) {
                    e.preventDefault();
                    $(this).css("background-color", "#00cc66");
                    $(this).css('cursor','pointer');
                },
                mouseleave: function (e) {
                    e.preventDefault();
                    $(this).css("background-color", "#c0c0c0"); 
                }
            });  

            $("#top-wrapper, #bottom-wrapper").on({
                click: function(e) {
                e.preventDefault();
                update($(this).attr('id'));
            }});
        }

        function disableHalve(){
            $("#top-wrapper, #bottom-wrapper").off('click');
            $("#top-wrapper, #bottom-wrapper").off('mouseenter').off('mouseleave');                 
            $("#top-wrapper, #bottom-wrapper").css({'cursor' :"default"});
            $("#top-wrapper, #bottom-wrapper").css({'background-color' :"#c0c0c0"});
        }   

        function disableBoxes(){
            $("#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve").off('click');                
            $("#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve").off('mouseenter').off('mouseleave');
            for (var y = 0; y < boxes.length; y++) {
                $("#"+boxes[y]+"").css("background-color", "blue"); 
                $("#"+boxes[y]+"").css('cursor','default');
            }
        }

        function enableBoxes(){
            $("#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve").on({
                click: function(e) {
                e.preventDefault();
                update($(this).attr('id'));
            }});

            $("#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve").on({
                mouseenter: function () {
                    $(this).css("background-color", "#00cc66");
                    $(this).css('cursor','pointer');
                },
                mouseleave: function () {
                    $(this).css("background-color", "blue"); 
                }
            });     
        }

This function is triggered from the click event. 

function update(answer){            
            console.log("answer: " + answer);

            if(answer === "top-wrapper" || answer === "bottom-wrapper"){
                console.log("ny test");
                serverRequest(answer);

            }else if(boxes.indexOf(answer) > -1) {
                console.log(answer);
                zeroCount = zeroCount - 1;
                currentAnswerSequence = currentAnswerSequence + answer;
                console.log("Inde zero: " + zeroCount);

                if(zeroCount == 0){
                    //This part here will make the function trigger again, because the click event calls update()
                    disableBoxes(); 
                    enableHalve();
                    serverRequest(currentAnswerSequence);
                    currentAnswerSequence = "";
                }
            }       
        }

我的HTML

<div id="top-wrapper">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
    <div id="six"></div>                
</div>

<div id="bottom-wrapper">
    <div id="seven"></div>
    <div id="eight"></div>
    <div id="nine"></div>
    <div id="ten"></div>
    <div id="eleven"></div>
    <div id="twelve"></div>             
</div>

Answer 1

问题是当点击内部div时，事件仍然会在处理程序被删除之前传播直到外部div。要解决此问题，请将e.preventDefault()更改为e.returnValue = false;。在jQuery中，这与调用e.preventDefault()和e.stopPropagation()。

相同

可以使用.data()为jQuery对象提供自定义属性。如果不是添加和删除事件处理程序，而是检查它是否应该使用.data("clickEnabled")或.data("mouseEnterEnabled")之类的if语句运行，那么它将大大简化您的代码并加快速度。然后，要启用或禁用事件，只需使用.data("clickEnabled", false)或.data("clickEnabled", true)设置jQuery对象的自定义属性。

当我用'on'附上它时，jquery点击事件会被触发

1 个答案: