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. 此外，当用户将鼠标悬停在组件上，然后将光标移到按钮上时，按钮会偶尔淡入淡出。我不知道如何阻止这种效果......我以为我曾经为这个按钮编写鼠标悬停代码：

   $（'button'）。mouseover（function（）{     $（本）.show（）; }）;

但这没有任何区别。

我很感激帮助。

Answer 1

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

点击

显示菜单

从您的代码中我假设您希望在用户单击 new 按钮时显示菜单。那里有两个问题（正如@Phil已经注意到的那样）：

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

由于您在悬停功能中创建按钮，因此单击处理程序不会绑定任何内容。要解决此问题，您可以使用jQuery.live或将处理程序绑定到整个表。我更喜欢后一种解决方案的优雅：

$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(); }); 事件元件。

{{1}}

工作示例

我已将您的code into jsbin添加到所有解决方案中并对其进行了更新。

希望它有所帮助。