Javascript 防止子元素触发父元素的硬编码单击事件

我有一门叫“猫”的课。在鼠标悬停事件中，会显示另一个div，其中有两个锚链，单击事件在锚链上硬编码。现在，单击锚点时，其父div click也会被激发。我试着把高尔塞还给他，但没用。代码如下

         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;
    }

函数onload（）
{
$（'.cat'）.css（'cursor'，'pointer'）；
$（'.cat'）.mouseenter（函数（e）{
$('', {
“类”：“提示”，
html:'名称：'+$（此）.data（'cat-Name'）+'
网站名称：'+$（此）.data（'Web-Name'）+'
子类别总数：'+$（此）.data（'Total-subcategory'）+'

，
css:{
位置：'固定'，
上图：e.pageY，
左：e.pageX，
边框：“1px纯红”，
背景：“黄色”，
填充：“5px”，
字体：“8”
}
}).附于（本）；
});
$（'.cat'）.mouseleave（函数（e）{
$（'.tip'，this.remove（）；
});
$（'.cat'）。在（'click'，getsubcategory'）上；
}
函数getsubcategory（）
{
var clicked=$（this.parent（）.attr（'id'）；
子类别（单击）；
返回false；
}
功能编辑类别（catid，e）{
警报（“编辑”+catid）；
返回false；
}
功能添加子类别（catid，e）{
警报（“添加”+catid）；
返回false；
}

您需要使用

event.stopPropagation（）

来防止事件在子元素click event（在您的例子中是锚定标记）中冒泡。大概是这样的：

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

你应该用这个

它防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

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

编辑

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

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

---

未定义事件。这是一个只有一个参数的硬编码函数。您可以修改内联单击事件以接受参数作为当前元素的对象，然后在被调用的函数中停止传播。看到这个了吗

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