Cách ngăn sự kiện nhấp chuột vào một lớp đang hoạt động bên trong một sự kiện nhấp chuột khác với jQuery

Question

Tôi có một số mục đã được nhận .active lớp học bằng cách nhấp vào chúng. Bây giờ, tôi không cần sự kiện nhấp chuột nào sẽ xảy ra ở bất kỳ lớp nào .active. Tôi có nhiều chức năng nhấp chuột làm cho mục active. Vì vậy, để ngăn chặn nhấp vào các lớp đang hoạt động, tôi đã viết chức năng ngăn chặn ở một nơi khác và gọi chúng bên trong mọi chức năng nhấp chuột. Nhưng, nó không hoạt động.

$('body').on('click', '#one', function() { 
    $(this).addClass('active'); 
    // do something more 
    noClickOnActive(); 
}); 
$('body').on('click', '#two', function() { 
    $(this).addClass('active'); 
    // do something more 
    noClickOnActive(); 
}); 

function noClickOnActive() { 
    $('body').on('click', '.content.active', function(event) { 
     event.preventDefault() 
     event.stopPropagation(); 
    }); 
}; 

Cách làm cho thiết bị hoạt động?

Fiddle work

Answer 1

sử dụng dưới mã. với jquery hasClass() chức năng bạn có thể kiểm tra xem phần tử có lớp hay không. nó trả về true/false.

DEMO

$('body').on('click', '#one', function() { 
    if($(this).hasClass('active')){ 
     return false; 
    } 
    $(this).addClass('active'); 
    alert('clicked'); 
}); 

Answer 2

Trình xử lý sự kiện hoạt động theo thứ tự đã đăng ký. Vì vậy, bạn có thể cần phải đặt điều này ngăn sự kiện mặc định trên lớp active ở đầu tất cả các sự kiện nhấp chuột khác.

$('body').on('click', '.content.active', function(event) { 
    event.preventDefault() 
    event.stopPropagation(); 
}); 

//Other event handlers code must be below 

khác ràng buộc sự kiện để .content và kiểm tra các lớp có

$('body').on('click', '.content', function(event) { 
 
if($(this).hasClass("active")) { 
 
    event.preventDefault() 
 
    event.stopPropagation(); 
 
} else { 
 
    $(this).addClass("active"); 
 
} 
 
});

.content { 
 
display: inline-block; 
 
border: 1px solid yellow; 
 
margin-right: 10px; 
 
padding: 5px; 
 
} 
 
.content:hover { 
 
cursor: pointer; 
 
} 
 
.content.active { 
 
background: yellow; 
 
cursor: inherit; 
 
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<div class="content" id="one"> 
 
<p>Click Me</p> 
 
</div> 
 
<div class="content" id="two"> 
 
<p>Another Click Me</p> 
 
</div>

Answer 3

Nếu click là vấn đề, có nghĩa là nó có một số hành động gắn với nó. Việc xóa hành động khỏi phần tử có giải quyết được vấn đề không? Giống như khi nhấp, hãy đặt href của liên kết thành "".

Hoặc chỉ cần đặt câu lệnh if trong các đầu vào và liên kết của bạn. Nếu bạn không có nhiều, nó không phải là một nhiệm vụ khó khăn.