javascript - jQuery 中的事件冒泡 - event.stopPropagation 不起作用

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

我将整个内容包裹在 anchor 标记 <a> 中因为我正在制作一个搜索结果项。

无论添加event.stopPropogation(); <a> 上的点击事件仍然着火。

Answer 1

你可以试试这个

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