javascript - 尝试处理触摸事件

标签 javascript jquery touch raphael

我正在使用鼠标事件来绘制自由线(使用Raphael),它可以很好地处理鼠标事件,但不能处理触摸事件。如果是触摸事件,是否需要将 event.pageX 替换为 event.screenX 或 event.clientX?

var board = $("#board");
board.bind("mousedown", _mousedownHandler);
        board.bind("touchstart", _mousedownHandler);
function _drawFreeLineBegin(x, y) {
        board.lineEl.path = _drawOptions.paper.path("M"
                + (x - _drawOptions.offset.left) + ","
                + (y - _drawOptions.offset.top));
        _setNewElementProperties(board.lineEl.path,
                Configuration.getProperties("freeLine"));
            board.bind("mousemove.mmu", _mousemoveHandler);
        board.one("mouseup.mmu", _mouseupHandler);
        board.bind("touchmove.mmu", _mousemoveHandler);
        board.one("touchend.mmu", _mouseupHandler);
    }
function _mousedownHandler(event) {
if(event.type == "touchstart"){
            event = event.touches[0];
        }
_drawFreeLineBegin(event.pageX, event.pageY);
return false;
}

    function _mousemoveHandler(event) {
    if(event.type == "touchmove"){
            event = event.touches[0];
        }
    board.lineEl.path
                        .attr(
                                "path",
                                board.lineEl.path.attr("path")
                                        + "L"
                                        + (event.pageX - )
                                        + ","
                                        + (event.pageY ));
                return true;

}

function _mouseupHandler(event) {
board.unbind(".mmu");
 board.lineEl.path = null;
    event.stopPropagation();
    event.preventDefault();
}

最佳答案

解决了这个问题,我需要替换 event.touches[0];与 event.originalEvent.touches[0];

关于javascript - 尝试处理触摸事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17713055/

相关文章:

javascript - 使用子字符串 javascript 过滤列表?

javascript - 元素隐藏时 CSS 动画暂停

javascript - 试图显示/隐藏 div 但有些东西不起作用

javascript - 通过 DOM 创建 html,结果只显示在控制台,而不会显示在网页上

javascript - touchmove开始时取消touchend事件

android - 如何将 Android SeekBar 设置为不可移动/卡住?

Android OpenGL ES 触摸添加对象

javascript - 在不降低图片质量的情况下减小javascript中的图像大小并下载图像

javascript - 无法申请<a>链接数组

jquery - 如何停止切换所有 iron-list 转换 - Polymer