返回元素上的事件不会在jQuery中触发

时间:2014-04-03 08:04:24

标签: javascript jquery events

好吧,我有一个棋盘上有所有斑点和碎片。它从2D阵列生成onload两个四个周期。这个想法是,你应该能够拖动一个棋子(我已经正确实施的东西),并让它进入一个有效的位置。放手部分应触发实际板位中的事件。因此,64个点中的每一个都有一个看起来像这样的均匀听众。

element.on("mouseup",function(e){
                if(Game.current==undefined||!$(this).hasClass("valid")){return;}
                var col,row;
                col = $(this).attr("column");
                row = $(this).attr("row");
                Game.current.attr({
                    "column":col,
                    "row":row
                });
                Game.move(Game.current);
                Game.changeTurn();
                Game.current = undefined;

            });

当我点击棋盘上的方块时,该功能会正常触发,但是当我在那里拖放棋子时,它并没有记录鼠标已经启动。然而,由于光标直接位于国际象棋棋盘上并且所述棋子和#34;阻止"光标直接位于光点上方。值得注意的是,我的HTML结构是这样的。

<board>
    <spot></spot>
    <piece></piece>
</board>

我的意思是,棋子,主教等不在这些地方内部,所以这个事件没有任何东西可以起泡&#34;通过

2 个答案:

答案 0 :(得分:1)

更好的方法是将mouseup的监听器附加到窗口对象上,执行类似这样的操作

$(window).on('mouseup', on_mouse_up );

然后,从鼠标位置计算出正确的位置。

function on_mouse_up( e ) {
    // Get the mouse position
    x = e.pageX;
    y = e.pageY;

    // Calculate the spot from the mouse position

}

答案 1 :(得分:1)

(function ($) {
    "use strict";
    //console.log($);
    $('document').ready(function () {
        var target;
        $('#wrapper').mousedown(function (e) {
            var el = $(e.target);
            if (el.hasClass('elem')) {
                target = el;
            }
        });
        $('#wrapper').mouseup(function (e) {
            var el = $(e.target);
            //console.log(e);
            if (target) {
                if (el.hasClass('kletca')) {
                    el.append(target);
                }
            }
            target = undefined;
        });
    });
}(jQuery));

http://jsfiddle.net/32DTv/一个简单的例子