单击事件对象跟踪问题

Click event object tracking woes

本文关键字：问题 跟踪 对象 事件 单击      更新时间：2023-09-26

所以我在这方面的工作，但通过点击事件获得元素id的jQuery。然后，这会触发一个功能，其作用类似于已弃用的.toggle()——它在第一次单击时将元素向下滑动，并在第二次单击时将元素向上滑动。然而，有一个bug会导致元素在被点击的次数中上下滑动。例如，如果这是我第二次使用. clicktoggle函数，则元素(表)在固定之前上下滑动两次，以此类推。我怀疑它与事件对象有关，e，跟踪点击次数——也就是说，我可能不应该设置id = e.target。id——但我不确定如何修复，同时仍然获得相关的元素id，我需要。

这里是相关的clickToggle插件(由stackoverflow提供的答案)。

(function($) {
        $.fn.clickToggle = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function() {
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }(jQuery));

下面是符合上述描述的错误代码。

$(document).click(function(e) { 
        //get the mouse info, and parse out the relevant generated div num 
        var id =  e.target.id; 
        var strId = id.match(/'d$/); 
        //clickToggle the individual table
        $('#showTable' + strId).clickToggle(function () {
            $('#table' + strId).slideDown();
            $('#table' + strId).load('files.php');      
        },
        function () {
            $('#table' + strId).slideUp();
        }); 
    });//close mousemove function

任何帮助都将非常感激。谢谢。

问题是每次调用clickToggle时都要为元素注册一个新的click处理程序:

this.click(function() {...

在随后的每次单击中，您将添加另一个处理程序，并调用之前的所有处理程序。Bleagh .

最好直接:(DEMO)

var showTable = function($table) {
    $table.slideDown();
    $table.load('files.php');
    $table.removeClass('hidden');
};
var hideTable = function($table) {
    $table.slideUp();
    $table.addClass('hidden');
};
$(document).click(function (e) {
    //get the mouse info, and parse out the relevant generated div num 
    var id = e.target.id;
    var strId = id.match(/'d$/)[0];
    var $table = $('#table' + strId);
    if ($table.hasClass('hidden')) {
        showTable($table);
    } else {
        hideTable($table);
    }
});
相关文章：