Question

我有两个div：

<div class="main">
    <div class="child" />
</div>

我为main元素创建了一个事件监听器，使用户可以拖动子元素

map.bind('touchmove', function(f) {
                if (map.pinch) {
                    return;
                }
                f.preventDefault();
                f.originalEvent.preventDefault();
                f = f.originalEvent.touches[0];
                map.handleMoveEvent(f);
            });

map.handleMoveEvent = function(f) {
                mover.css('left', map.getX() + (f.clientX - map.lastmouse.clientX) / scaler.scale);
                mover.css('top', map.getY() + (f.clientY - map.lastmouse.clientY) / scaler.scale);
                map.lastmouse = f;
                map.moverMoved();
        }

map.moverMoved = function() {

            if (map.getX() > 0) {
                map.tileX--;
                mover.moveX(-TILE_WIDTH);
                map.find(".child").moveX(TILE_WIDTH);
                map.updateVisibleTiles();
            }
            if (map.getX() < -TILE_WIDTH) {
                map.tileX++;
                mover.moveX(TILE_WIDTH);
                map.find(".child").moveX(-TILE_WIDTH);
                map.updateVisibleTiles();
            }
            if (map.getY() > 0) {
                map.tileY--;
                mover.moveY(-TILE_HEIGHT);
                map.find(".child").moveY(TILE_HEIGHT);
                map.updateVisibleTiles();
            }
            if (map.getY() < -TILE_HEIGHT) {
                map.tileY++;
                mover.moveY(TILE_HEIGHT);
                map.find(".child").moveY(-TILE_HEIGHT);
                map.updateVisibleTiles();
            }

            $('#console').html(map.tileX + " " + map.tileY);
            //$('#console').html(map.getX() + " " + map.getY());
        };

map.updateVisibleTiles = function() {
                mover.find(".child").remove();
                for (x = Math.max(map.tileX - tiledistance, 0); x <= Math.min(map.tileX + tiledistance, map.getTileCount() - 1); x++) {
                    for (y = Math.max(map.tileY - tiledistance, 0); y <= Math.min(map.tileY + tiledistance, map.getTileCount() - 1); y++) {
                        var child = $(document.createElement('div'));
                        child.width(TILE_WIDTH);
                        child.height(TILE_HEIGHT);
                        var farbe = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
                        child.css("background-color", farbe);
                        child.css('position', 'absolute');
                        child.addClass('child');
                        child.css('left', (x - map.tileX) * TILE_WIDTH);
                        child.css('top', (y - map.tileY) * TILE_HEIGHT);
                        mover.append(child);
                    }
                }
            }

在某些情况下，我必须在拖动时交换孩子

$('.main').find(".child").remove();

但删除touchmove后不再开火了。只有当我通过点击子元素来启动touchmove时才会发生...这个问题对我来说很明显，但解决方案是什么？

Answer 1

$().remove()删除dom元素及其事件侦听器。使用$().detach()保留事件侦听器。

http://api.jquery.com/detach/

.detach（）方法与.remove（）相同，除了.detach（）保留与删除的元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法很有用。

Answer 2

我刚创建了一个处理事件的隐形叠加层，这似乎有效：

var toch = $(document.createElement('div'));
toch.css('position', 'absolute');
toch.css('width', '100%');
toch.css('height', '100%');
map.append(toch);

toch.bind('touchmove', function(f) {})

删除子进程时，jQuery touchmove停止工作

2 个答案: