Đặt cái tiêu đề cho bài viết này thật sự là khó vì mô tả mà không có hình thì các bạn chắc sẽ khó hiểu. Mình xin có hình ví dụ dưới đây:
Ta có 2 thẻ DIV là A và B. 2 thẻ DIV này sẽ được bọc bởi một thẻ DIV khác là C.
Sẽ thật dễ dàng nếu ta viết lệnh bắt hành động click lên 2 thẻ A và B. Tuy nhiên giờ thêm yêu cầu bắt sự kiện khi click lên thẻ C mà không gọi hành động của thẻ A và B.
Nếu ta viết lệnh gọi click thông thường cho thẻ C thì nếu click bên ngoài thẻ A và B thì ổn nhưng khi click lên A hoặc B thì trình duyệt nó tự hiểu là bạn cũng đã click lên C và sẽ chạy luôn lệnh của thẻ ngoài (C) và cả thẻ trong (A hoặc B).
Giải pháp sao đây? Đơn giản với đoạn mã sau cho lệnh click của thẻ bao ngoài (C):
1 2 3 4 5 | $('div#C').bind('click', function (evt) { if(evt.target == $('div#C')[0]) { //Function... } }); |
Với lệnh này thì lệnh chỉ thực thi cho thẻ C khi bạn click lên vùng ngoài trống không bị đè bởi thẻ nào bên trong (A hoặc B).
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
