Question

在下面的代码块中，我想在event.preventDefault内的a标记上调用.ul li，以便点击任意列表元素时a标记不应重定向到其href属性中的网页。我尝试$this.find("a").preventDefault();，但这会导致错误。我该怎么做呢？

$(document).ready(function () {
    $(".ul li").on("click", function () {
        var $this = $(this);
        $this.find("a").preventDefault();

        // switch all lists off 
        $(".selectedList, .checkedList").removeClass("selectedList, checkedList");
        // switch this list on  
        $this.addClass("selectedList, checkedList");
    });
});

Answer 1

您可以在DOM元素上的事件对象上使用event.preventDefault。您可以通过向a添加事件点击事件并调用preventDefault

来实现这一目的

$(".ul li a").click(function(event){    
     event.preventDefault();    
});

Answer 2

$(".ul li a").on("click", function(e)
{
    var $this = $(this);
    e.preventDefault();

    $(".selectedList, .checkedList").removeClass("selectedList, checkedList");
    // switch this list on  
    $this.parent().addClass("selectedList, checkedList");//or parents('li')
});

，最后使用.parent如果a是li的直接子项，或者使用.parents('li')将class添加到parent li。

或

closest('li')可以正常使用。

Answer 3

您需要在preventDefault()中致电event object。

我认为addClass用法也是错误的，如果要添加/删除多个类，则类名之间不应该有,

$(document).ready(function() {
        $(".ul li a").on("click", function(e) {
            var $this = $(this);
            e.preventDefault();

            // switch all lists off 
            $(".selectedList, .checkedList").removeClass("selectedList checkedList");
            // switch this list on  
            $this.addClass("selectedList checkedList");
        });
    });

Answer 4

你需要传递事件对象. preventDefault()是为了事件。

$(document).ready(function() {
        $(".ul li").on("click", function(evt) {
            var $this = $(this);
            evt.preventDefault(); // this should be like this. 

            // switch all lists off 
            $(".selectedList, .checkedList").removeClass("selectedList, checkedList");
            // switch this list on  
            $this.addClass("selectedList, checkedList");
        });
    });

Answer 5

您应该只使用点击事件的a元素

$(document).ready(function() {
    $(".ul li a").on("click", function( e ) {
        var $this = $(this);
        e.preventDefault();

        // switch all lists off 
        $(".selectedList, .checkedList").removeClass("selectedList, checkedList");
        // switch this list on  
        $this.parent( 'li' ).addClass("selectedList, checkedList");
    });
});

Answer 6

.preventDefault()函数属于jQuery规范化event对象，该对象作为第一个参数传递给事件处理函数。只需在匿名函数上指定参数的名称并使用它：

$(document).ready(function() {
    $(".ul li").on("click", function(event) {
        var $this = $(this);
        event.preventDefault();

        // switch all lists off 
        $(".selectedList, .checkedList").removeClass("selectedList checkedList");
        // switch this list on  
        $this.addClass("selectedList checkedList");
    });
});

由于事件冒泡，click元素上触发的任何<a>事件也应由此事件处理程序处理。另请注意，使用.addClass()和.removeClass()函数时，类名列表是空格，而不是逗号，分隔 - 它应该是"selectedList checkedList"而不是"selectedList, checkedList"，除非您的类是selectedList,。

如何在“.ul li”中的“a”标签上调用“event.preventDefault”？

6 个答案: