javascript - 防止子元素触发父元素的硬编码点击事件

Question

我有一个名为“cat”的 div 类。在鼠标悬停事件中，另一个 div 显示有两个 anchor 链接，其上的点击事件是硬编码的。现在，当单击 anchor 时，它的父 div 单击也会被触发。我试图返回 galse，但它不起作用。代码如下

         function onload()
    {
        $('.cat').css('cursor', 'pointer');
        $('.cat').mouseenter(function (e) {
            $('<div />', {
                'class': 'tip',
                html: 'Name: ' + $(this).data('cat-name') + '<br/>Web Name: ' + $(this).data('web-name') + '<br/>Total No. Of SubCategories: ' + $(this).data('total-subcategory') + '<br/><br/><a href="#" onclick = "return addsubcategory(' + $(this).data('cat-id') + ',this)">Add Sub Category</a>&nbsp;<a href="#" onclick = "editcategory(' + $(this).data('cat-id') + ',this)">Edit Category</a> ',
                css: {
                    position: 'fixed',
                    top: e.pageY,
                    left: e.pageX,
                    border: '1px solid red',
                    background: 'yellow',
                    padding: '5px',
                    font: '8'
                }
            }).appendTo(this);


        });
        $('.cat').mouseleave(function (e) {
            $('.tip', this).remove();
        });

        $('.cat').on('click', getsubcategory);



    }
    function getsubcategory()
    {

        var clicked = $(this).parent().attr('id');
        gatsubcategory(clicked);
        return false;
    }
    function editcategory(catid,e) {
        alert("Edit " + catid);

        return false;

    }
    function addsubcategory(catid,e) {
        alert("Add " + catid);

        return false;
    }

Answer 1

您需要使用 event.stopPropagation() 来防止事件在子元素点击事件(在您的情况下是 anchor 标记)中冒泡。像这样:

$('.cat a').click(function(e){
    e.stopPropagation();
});