javascript - stopPropagation() 不起作用？

Question

我是 Javascript 的新手，我正在尽我最大的努力培养对事件在 jquery 中的工作方式的直觉。我正在开发一个交互式用户界面，允许用户编辑附加到组件单元格的对象。在我的代码中，我创建了一个包含 2 列和多行的网格。其中一列由具有以下 html 结构的单元格组成:

当用户将鼠标悬停在该单元格上时，会弹出 3 个按钮:新建、编辑、删除。

一切正常，但我遇到了以下问题:1.单击按钮时，菜单不出现。我也相信即使我在 button.click() 中使用 stopPropagation，也会有事件传播到祖先组件。因此，单击按钮会调用 component.click() ，从而生成一组新的按钮。

$(function() {

    var $table = $('table');
    var $form = $('<form>')
    for (i = 42; i > 0; i--) {
        $table.append('<tr><td class = "number">' + i + 
            '</td><td class = "component"></td></tr>');
    }
    /*
    $('td.component').on('click', function(e) {
        $(this).append('<button type = "submit" class = "new"><img class = "icon" src = "images/new.png" >new</img></button>' +
            '<button class = "edit"><img class = "icon" src = "images/edit.png">edit</img></button>' +
            '<button class = "delete"><img class = "icon" src = "images/delete.png">delete</img></button>');
    });*/
    /* support for hovering*/
    $('td.component').mouseover(function() {
        //$(this).css('background-color', '#ADD8E6');   
        $(this).append('<button class = "new"><img class = "icon" src = "images/new.png" >new</img></button>' +
            '<button class = "edit"><img class = "icon" src = "images/edit.png">edit</img></button>' +
            '<button class = "delete"><img class = "icon" src = "images/delete.png">delete</img></button>');
        });
    $('td.component').mouseout(function() {
        $(this).css('background-color', '#FFFFFF');
        $('button').remove();
    });

    $('button').mouseover(function() {
        $(this).show();
    });

    $('button.new').click(function(e) {
        e.stopPropagation();
        componentMenu();
    });
    $('button.edit').click(function(e){
        e.stopPropagation();
    });
    $('button.delete').click(function(e){
        e.stopPropagation();
    });

    function componentMenu() {
        var $menu = $('<select>');
        $menu.append('<option>Bloodhound</option>');
        $menu.append('<option>Compute</option>');
        $menu.append('<option>Powershelf</option>');
        $menu.append('<option>Storage</option>');
        $menu.append('<option>Switch</option>');
    }

});

1. 此外，当用户将鼠标悬停在组件上，然后将光标移到按钮上时，按钮偶尔会淡入和淡出。虽然我不确定如何防止这种效果......有人认为我曾经为按钮编写鼠标悬停代码，如下所示:

   $('按钮').mouseover(函数() { $(this).show();});

但这没有任何区别。

感谢您的帮助。

Answer 1

我不确定您的总体目标是什么，但让我梳理一下问题并向您展示可能的解决方案。

点击显示菜单

根据您的代码，我假设您希望在用户单击新建 按钮时随时显示菜单。那里有两个问题(正如@Phil 已经指出的那样):

1。按钮单击事件处理程序在按钮存在之前绑定(bind)

由于您在悬停函数中创建了按钮，因此点击处理程序没有绑定(bind)任何内容。要解决此问题，您可以使用 jQuery.live 或将处理程序绑定(bind)到整个表。我更喜欢后一种解决方案，因为它很优雅:

$table.on('click', 'button.new', function(e) {
    // button new clicked
});
$table.on('click', 'button.edit', function(e) {
    // button edit clicked
});
$table.on('click', 'button.delete', function(e) {
    // button delete clicked
});

2。 componentMenu 函数实际上没有做任何事情

componentMenu 的代码只是创建菜单元素的 jQuery 表示，但它没有附加到 DOM 的任何地方。最简单的解决方案是将它附加到您希望它出现的任何位置。

function componentMenu() {
    var $menu = $('<select>');
    $menu.append('<option>Bloodhound</option>');
    $menu.append('<option>Compute</option>');
    $menu.append('<option>Powershelf</option>');
    $menu.append('<option>Storage</option>');
    $menu.append('<option>Switch</option>');

    $menu.appendTo('element-to-append-menu-to');
}

按钮淡入淡出

按钮的偶尔淡入淡出是由使用 mouseover/mouseout 事件引起的。每当用户将鼠标移到元素上时都会触发事件 mouseover，这会导致按钮在鼠标移动时重绘。

可能的解决方案是使用 mouseenter 事件，它只在用户鼠标开始悬停在元素上时触发一次，以及 mouseleave 事件，它也只在用户鼠标悬停在元素上时触发一次用户的鼠标停止悬停在元素上。

$('td.component').mouseenter(function() {
    $(this).append('<button class = "new"><img class = "icon" src = "images/new.png" >new</img></button>' +
        '<button class = "edit"><img class = "icon" src = "images/edit.png">edit</img></button>' +
        '<button class = "delete"><img class = "icon" src = "images/delete.png">delete</img></button>');
    });
$('td.component').mouseleave(function() {
    $('button').remove();
});

工作示例

我已经把你的code into jsbin并使用所有解决方案更新它并对其进行了一些改进。

希望对您有所帮助。