Question

我刚开始学习jquery，但我在这里吃了这个部分，因为我的点击事件多次被触发。也许这是一个愚蠢的问题，但这让我发疯，因为我已经搜索了几个小时来解决这个问题而一无所获。

<script type='text/javascript'>
    $(document).ready(function(){
        var movie_id;
        var m_hover_time;
        var loader = "<img class='loader' src='images/loader.gif' />";
        $("#mhb .each_movie").mouseenter(function(){
            movie_id = $(this).attr("movie_id");
            m_hover_time = setTimeout(function(){
                $("[movie_id='"+movie_id+"'] .each_movie_box").append(loader).slideDown();
                $.post("ajax/movie_load.php",{load_type:2, movie_id:movie_id}, function(movie_info){
                    $("[movie_id='"+movie_id+"'] .each_movie_box").html(movie_info);
                });
            }, 1500);
 $("[movie_id='"+movie_id+"'] .newsfeed_it").click(function(){
            alert(movie_id);
            return false;
        });
        }).mouseleave(function(){
            clearInterval(m_hover_time);
            $("[movie_id='"+movie_id+"'] .each_movie_box").html(" ").slideUp();
        });
    });
</script>

在Jquery代码之后有一个php脚本可以返回所有这样的电影：

<div class='each_movie' movie_id='{$each_movie['id']}'> <!-- Each movie start here -->
                <div class='each_movie_box'>
                    <!-- each_box -->
                </div>
                <div class='each_movie_thumb' style='background-image:url({$each_movie['thumb']});'>
                    <div class='each_movie_hover'>
                        <div class='emh_top'><img src='images/movie_info.png' class='newsfeed_it' /></div>
                        <a href='filma.php?filmi={$each_movie['id']}'><div class='emh_play'></div></a>
                        <div class='emh_bottom'>
                            <img src='images/movie_fav.png' />
                            <img src='images/movie_later.png' />
                        </div>
                    </div>
                </div>
                <div class='each_movie_info'>
                    <a href='filma.php?filmi={$each_movie['id']}'>
                        <span class='name'>{$each_movie['title']}</span>
                    </a>
                    <span class='categories'>{$movie_categories}</span>
                    <span class='views'>{$each_movie['views']} Shikime</span>
                </div>
            </div>

我甚至尝试过event.stopPropagation（）方法，但没有修复它：/

Answer 1

您不应在click中附加mouseenter事件处理程序，因为每次将鼠标移到它上面时都会重新添加偶数处理程序。每当您点击click时偶数处理程序将被执行多次，因为您已触发mouseenter事件。试试这个：

$(document).ready(function(event){
    $("#mhb .each_movie").each(function(){
        var movie_id = $(this).attr("movie_id");
        $("[movie_id='"+movie_id+"'] .newsfeed_it").click(function(){
            alert(movie_id);
            return false;
        });
    });
});

演示：http://jsfiddle.net/mD8fp/

Answer 2

问题是你用每个＆＃34; mouseenter＆＃34;绑定一个新的点击事件，这会导致事件成倍增加。因此，如果您多次使用mouseenter并单击您的元素，则事件将多次触发（与鼠标输入元素一样多次。

您可以使用.each()函数循环遍历元素，然后将click事件分别绑定到每个元素。您不需要触发mousenter事件来绑定点击事件。

然后，为了引用movie_id数据，您可以使用.parents()函数搜索父容器，然后从匹配的父元素中获取数据。

试试这个：

$(document).ready(function(event){
    $("#mhb .each_movie").each(function() {
        var $img = $(this).find('.newsfeed_id');

        //Bind a click event to the image element.
        $img.click(function() {
            var $this = $(this);
            $parent = $this.parents('.each_movie');  //Search for parents with class .each_movie
            movie_id = $parent.data('movie_id'); //Get the movie_id from the parent.

            alert(movie_id);
            return false;
        });
    });
});

您还会注意到我使用的是data('movie_id')，这是从元素中检索自定义数据的更合适的方法。您应该使用data-movie_id='{$each_movie['id']}'设置标记上的数据，如下所示：

<div class='each_movie' data-movie_id='{$each_movie['id']}'>

从那里，您可以使用$(this).data('movie_id');

检索该值

在此处详细了解.data()代码：http://api.jquery.com/data/

在此处查看工作示例：http://jsfiddle.net/tNpmP/

另外，我相信你有一个错字。您的HTML中有.newsfeed_it，但您在javascript中调用.newsfeed_id。

Answer 3

尝试在函数中添加一个布尔值，因此在函数集之外：

var entered = false;

在功能集内：

entered = true;

然后使用

添加mouseleave函数

entered = false;

这应该可以解决您的问题

jquery - 如何阻止点击事件冒泡？

3 个答案: