Question

我可以快速点击“照片”菜单4次，然后将＆＃34; $。get（......＆＃34;）发送到服务器4次。我需要禁用此菜单（单击一次后），因此无法再次单击该菜单。环境：NodeJS，Express，Pug，Jquery 谢谢，专利

--------------DOM----------------------------------
// file = photos.pug
div#wrapper2
    div#altnav
      ul
        include includes/altnav.pug
        include includes/navjs.pug
---------------------------------------------------
// file = includes/altnav.pug
li: a.navigation(href='#', data-level='/images/cs/Photos') Photos
---------------------------------------------------
// file = includes/navjs.pug
script.
    $(function(){ // jQuery DOM ready
        $('.navigation').click(function () {
            var level = 'm' + $(this).data('level');        // Append an 'm' so I know this came from navjs.pug
            var url = '/navigation?level=' + escape(level); // Send this to the /router/photos.js
            $.get(url, function (data) { 
                $('body').html(data);           // data = new HTML page to be loaded by browser
            });
        });
    });

Answer 1

我通常会为此点击元素添加一个标记

$('.navigation').on('click',function(){
    if(!$(this).data('clicked')){
         $(this).data('clicked',true);
         // do rest of your staff
    }
});

或者，如果您想要禁用它，如果它可以使用表单元素：

$('.navigation').on('click',function(){ 
     // do rest of your staff
     $(this).prop( "disabled", true );
});

或者如果你想阻止指针交互使用CSS。 pointer-events: none;您可以使用：

$('.navigation').on('click',function(){ 
     // do rest of your staff
     $(this).css( "pointer-events", 'none' );
});

Answer 2

$(function(){ // jQuery DOM ready
   $('.navigation').click(function () {
      $(this).css({
        "pointer-events": "none",
        "cursor": "default"
      });
          /* then your code */
   });
});

如何在单击后禁用属性菜单项？

2 个答案: