Question

我有一个名为＆＃39; cat＆＃39;的div类。在鼠标悬停事件中，显示另一个div，其中有两个锚点链接，其中点击事件是硬编码的。现在，当单击锚点时，其父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()来防止事件在子元素点击事件（在您的情况下是锚标记）中冒泡。像这样的东西：

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

Answer 2

您应该使用event.stopPropagation。

它阻止事件冒泡DOM树，防止任何父处理程序被通知事件。

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

修改

您也可以在内联javascript中执行此操作，只需将事件作为另一个参数传递，

<a onclick="test(event)"></a>

的javascript

function test(event) { event.stopPropagation(); }

阻止子元素触发父元素的硬编码点击事件

2 个答案: