Tạm dừng sự kiện mặc định trong jQuery

Question

Tôi đang cố trì hoãn sự kiện hoặc sự kiện mặc định trong tập lệnh jQuery. Ngữ cảnh là tôi muốn hiển thị một thông báo cho người dùng khi họ thực hiện một số hành động nhất định (bấm chủ yếu) trong vài giây trước khi hành động mặc định kích hoạt.

Pseudo-code: - Người dùng nhấp liên kết/nút/yếu tố - Người dùng nhận được một thông báo popup nêu 'Bạn đang rời khỏi trang web' - tin nhắn vẫn còn trên màn hình cho mili giây X - Hành động mặc định (có thể khác so với href liên kết quá) bắn

cho đến nay, những nỗ lực của tôi trông như thế này:

$(document).ready(function() { 
    var orgE = $("a").click(); 
    $("a").click(function(event) { 
     var orgEvent = event; 
     event.preventDefault(); 
     // Do stuff 
     doStuff(this); 

     setTimeout(function() { 
      // Hide message 
      hideMessage(); 
      $(this).trigger(orgEvent); 
     }, 1000); 
    }); 
}); 

Tất nhiên, điều này không làm việc như mong đợi, nhưng có thể hiển thị những gì tôi đang cố gắng làm.

Tôi không thể sử dụng plugin vì ths là môi trường được lưu trữ mà không có quyền truy cập trực tuyến.

Bất kỳ ý tưởng nào?

Answer 1

này có thể làm việc:

$(document).ready(function() { 
    $("a").click(function(event) { 
    event.preventDefault(); 
    doStuff(this); 

    setTimeout(function() { 
     hideMessage(); 
     $(this).click(); 
    }, 1000); 
    }); 
}); 

Lưu ý: hoàn toàn chưa được kiểm tra

Answer 2

tôi có lẽ sẽ làm một cái gì đó như thế này.

$("a").click(function(event) { 
    event.preventDefault(); 
    doStuff(this); 
    var url = $(this).attr("href"); 

    setTimeout(function() { 
     hideMessage(); 
     window.location = url; 
    }, 1000); 
}); 

Tôi không chắc chắn nếu bạn có thể nhìn thấy url từ bên trong chức năng hẹn giờ. Nếu không, bạn có thể cần khai báo nó bên ngoài trình xử lý nhấp chuột.

Chỉnh sửa: Nếu bạn cần kích hoạt sự kiện từ chức năng hẹn giờ, bạn có thể sử dụng một cái gì đó tương tự như những gì karim79 đề xuất, mặc dù tôi sẽ thực hiện một vài thay đổi.

$(document).ready(function() { 
    var slept = false; 
    $("a").click(function(event) { 
    if(!slept) { 
     event.preventDefault(); 
     doStuff(this); 

     var $element = $(this); 
     // allows us to access this object from inside the function 

     setTimeout(function() { 
      hideMessage(); 
      slept = true; 
      $element.click(); //triggers the click event with slept = true 
     }, 1000); 
     // if we triggered the click event here, it would loop through 
     // this function recursively until slept was false. we don't want that. 
    } else { 
     slept = false; //re-initialize 
    } 
    }); 
}); 

Edit: Sau một số thử nghiệm và nghiên cứu, tôi không chắc chắn rằng nó thực sự có thể kích hoạt các sự kiện nhấp chuột ban đầu của một phần tử <a>. Có vẻ như có thể cho bất kỳ phần tử nào khác ngoài <a>.

Answer 3

Một cái gì đó như thế này nên làm các trick. Thêm một lớp mới (có lẽ với một tên hợp lý hơn cái tôi đã chọn) cho tất cả các liên kết bạn muốn bị ảnh hưởng. Xóa lớp đó khi bạn đã hiển thị cửa sổ bật lên của mình, vì vậy khi bạn gọi .click() một lần nữa mã của bạn sẽ không còn chạy nữa và hành vi mặc định sẽ xảy ra.

$("a").addClass("fancy-schmancy-popup-thing-not-yet-shown").click(function() { 
    if ($(this).hasClass("fancy-schmancy-popup-thing-not-yet-shown")) 
     return true; 

    doStuff(); 
    $(this).removeClass("fancy-schmancy-popup-thing-not-yet-shown"); 

    var link = this; 
    setTimeout(function() { 
     hideMessage(); 
     $(link).click().addClass("fancy-schmancy-popup-thing-not-yet-shown"; 
    }, 1000); 

    return false; 
}); 

Answer 4

Có lẽ cách tốt nhất để làm điều này là sử dụng unbind. Một cái gì đó như:

$(document).ready(function() { 
    $("a").click(function(event) { 
     event.preventDefault(); 
     // Do stuff 
     this.unbind(event).click(); 
    }); 
})