Question

我正在尝试阻止点击表单冒泡到父<a> HTML标记。这是我的代码：

var $result = $("<a href='" + result["link"] + "' class='list-group-item'></a>");
var $title = $("<h4 class='list-group-item-heading'>" + result['title'] + "</h4>");
var $snippet = $("<p class='list-group-item-text'>" + result['htmlSnippet'] + "</p>");

// some code omitted for brevity

var $expandBooksbutton = $("<button type='button' id='btn-showMoreBooks' class='btn btn-default btn-xs'><span class='glyphicon glyphicon-resize-full'></span> expand</div></button>");

$expandBooksbutton.on('click', function(event){
    event.stopPropagation();
    var height = $('#book-container').height();
    if(height != 200){
        $('#book-container').height(200);
    }
    else{
        $('#book-container').height(100);
    }
});

我将整个事情包装在锚标记<a>中，因为我正在制作一个搜索结果项。

无论添加event.stopPropogation();，<a>上的点击事件仍然会触发。

Answer 1

你可以试试这个

$(<a tag selector>).on('click',function(e){
    e.preventDefault();
});

Answer 2

阻止冒泡和取消默认浏览器行为之间存在差异。尝试添加

return false;

在你的处理程序函数的末尾，就像这个

    $expandBooksbutton.on('click', function(event){
    var height = $('#book-container').height();
    if(height != 200){
        $('#book-container').height(200);
    }
    else{
        $('#book-container').height(100);
    }
    return false;

});

如果我正确理解了这个问题，这应该是解决方案。

<强>更新

对不起，我应该提到，还有一个替代方案（实际上我应该作为主要建议），这是：

event.preventDefault();

此功能实际上阻止了默认行为，而

返回false;

同时执行（停止冒泡并防止默认行为）

这里有更多信息： event.preventDefault() vs. return false

Answer 3

在不知道完整的DOM结构的情况下，这将略显抽象。但是，在将元素添加到DOM之前绑定到元素的事件处理程序实际上并未触发。

来自jQuery docs：

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）时，页面上必须存在。
  要确保元素存在且可以选择，请执行事件   绑定在文档就绪处理程序中的元素   页面上的HTML标记。如果将新HTML注入页面中......在将新HTML放入页面后附加事件处理程序。或者，使用委托活动......

所以基本上你有两个选择：为委托事件创建处理程序，并在将父项添加到DOM 之后将其绑定到父元素。请注意，此方法要求父项也嵌套在<a>内。

$(parent-elem).on('click', '#btn-showMoreBooks', function(e) { // your handler logic });

当然，您可以始终保持逻辑原样，但只有在将处理程序添加到DOM后才将处理程序绑定到该元素。只要您在初始页面加载后不能动态地重新创建该元素，这是合理的。

事件冒泡在jQuery中 - event.stopPropagation无法正常工作

3 个答案: