Question

我有一个切换2个div的按钮。并且在5秒后执行相同操作的功能。但是当用户单击按钮时，该功能也可以使用。如何在单击按钮时禁用该功能？

这就是我想要的：如果单击.turn-button，则禁用show_back函数。

我的代码：

 $(document).ready(function() {

    // Toggle
    $(".toggle-class").hide();

    $(".turn-button").click(function() {
        $(".toggle-class").slideToggle(500);
        $(".toggle-class-back").slideToggle(500);
    }); 

    // Show back after 7 seconds
    $(function(){
       function show_back(){
            $(".toggle-class").slideToggle(500);
            $(".toggle-class-back").slideToggle(500);
       };
       window.setTimeout( show_back, 5000 ); // 5 seconds
    });

});

Answer 1

您可以使用.off（）函数禁用点击事件

$("p").on("click", function() {
  $(this).css("background-color", "red");
  $("#clicked").html("clicked");
});
$("button").click(function() {
  $("p").off("click");
  $("#clicked").html("disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <p> Test Data</p>
  <div id="clicked"></div>

  <button>Click</button>
</body>

</html>

单击此段落可更改其背景颜色并更改要单击的div文本。

单击下面的按钮，然后单击此段落（单击事件将被删除）。

Answer 2

你可以试试这个：

 $(document).ready(function() {
    var clicked = false;
    // Toggle
    $(".toggle-class").hide();

    $(".turn-button").click(function() {
        clicked = true;
        $(".toggle-class").slideToggle(500);
        $(".toggle-class-back").slideToggle(500);
    }); 

    // Show back after 7 seconds
    $(function(){
       function show_back(){
            if(!clicked){   
                $(".toggle-class").slideToggle(500);
                $(".toggle-class-back").slideToggle(500);
            }
       };
       window.setTimeout( show_back, 5000 ); // 5 seconds
    });
});

Answer 3

使用clearTimeout();

$(document).ready(function() {
    // Toggle
    $(".toggle-class").hide();
    var Timer = setTimeout( show_back, 5000 ); // 5 seconds
    $(".turn-button").click(function() {
        clearTimeout(Timer);
        $(".toggle-class , .toggle-class-back").slideToggle(500);
    }); 
});

// show back function
function show_back(){
    $(".toggle-class , .toggle-class-back").slideToggle(500);
};

如何禁用点击事件的功能？

3 个答案: