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

Question

我可以快速点击照片菜单 4 次，“$.get(...” 被发送到服务器 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

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

Answer 2

我通常会为此添加一个标志到这样的单击元素

$('.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' );
});