Question

我有一个包含图片的网格（见下面的小提琴），我想做的就是模仿绘图动作。

我开始在我的个人电脑上工作，但是为了一些事情，它在移动设备上使用了麦芽汁。我认为移动设备有不同的处理事件。

正如您所看到的，我现在使用mouseenter事件。问题是如何让它在移动设备上运行？

这是我的代码： JS

    createLoop();


$('.b').bind('mouseenter', StartDragSelect);




function createLoop() {
    var length = 30;
    var text = "";
    var demo = $("#demo")
    for ( i = 0; i < length; i++) {
        var rowElement = $('<div class="a"></div>');
        demo.append(rowElement);
        for (var x = 0; x < length; x++) {
            createGridItem(rowElement, i, x);
        }
    }
}

function createGridItem(rootElement, i, x) {
    var pix = 10;
    var currItem = $('<div class="b" id="a' + i + x + '" style="top:' + i * pix + 'px; left: ' + x * pix + 'px;  background-position-x: -' + x * pix + 'px ; background-position-y:-' + i * pix + 'px";"></div>');
    $(rootElement).append(currItem);
}




var gridSize = length * length;
var letter = getParameterByName("letter");

function StartDragSelect(obj) {
    obj = obj.currentTarget;
    if (obj.className == "selected") {
        obj.className = "b";

    } else {
        obj.className = "selected";

    }

    $(obj).css({
        "background-image" : "url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg')"
    });
}

这是fiddle

任何帮助都会很棒！ TNX

Answer 1

移动设备上没有此类事件mouseenter。您必须使用touchstart touchmove和touchend来模拟移动设备上的mouseenter事件。

以下是移动设备上的触摸事件：

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

对于一个真实的用例，您可以检查我所做的笔的来源：http://codepen.io/esimov/pen/Kefql/

移动设备上的jquery事件处理程序 - 模仿绘图操作

1 个答案: