javascript - 求助：如何把图片的选择截取功能的鼠标点击事件转换为移动端的touch事件？
正在使用JS写一个拍照截取部分图片上传的功能，但是现在想让手机端也能够拖拽截图框。不知道如何让鼠标的点击事件转换为触摸屏的touch事件
var startDrag = function (point, target, kind) { //point是拉伸点，target是被拉伸的目标，其高度及位置会发生改变 //此处的target与上面拖拽的target是同一目标，故其params.left,params.top可以共用，也必须共用 //初始化宽高 params.width = getCss(target, "width"); params.height = getCss(target, "height"); //初始化坐标 if (getCss(target, "left") !== "auto") { params.left = getCss(target, "left"); } if (getCss(target, "top") !== "auto") { params.top = getCss(target, "top"); } //target是移动对象 point.onmousedown = function (event) { params.kind = kind; params.flag = true; clickFlag = true; if (!event) { event = window.event; } var e = event; params.currentX = e.clientX; //鼠标按下时坐标x轴 params.currentY = e.clientY; //鼠标按下时坐标y轴 /*console.log('params.currentX=', params.currentX); console.log('params.currentY=', params.currentY);*/ //防止IE文字选中，有助于拖拽平滑 point.onselectstart = function () { return false; }; document.onmousemove = function (event) { let e = event ? event : window.event; clickFlag = false; if (params.flag) { var nowX = e.clientX; // 鼠标移动时x坐标 var nowY = e.clientY; // 鼠标移动时y坐标 var disX = nowX - params.currentX; // 鼠标x方向移动距离 var disY = nowY - params.currentY; // 鼠标y方向移动距离 if (params.kind === "n") { //上拉伸 //高度增加或减小，位置上下移动 target.style.top = parseInt(params.top) + disY + "px"; target.style.height = parseInt(params.height) - disY + "px"; } else if (params.kind === "w") { //左拉伸 target.style.left = parseInt(params.left) + disX + "px"; target.style.width = parseInt(params.width) - disX + "px"; } else if (params.kind === "e") { //右拉伸 target.style.width = parseInt(params.width) + disX + "px"; } else if (params.kind === "s") { //下拉伸 target.style.height = parseInt(params.height) + disY + "px"; } else if (params.kind === "nw") { //左上拉伸 target.style.left = parseInt(params.left) + disX + "px"; target.style.width = parseInt(params.width) - disX + "px"; target.style.top = parseInt(params.top) + disY + "px"; target.style.height = parseInt(params.height) - disY + "px"; } else if (params.kind === "ne") { //右上拉伸 target.style.top = parseInt(params.top) + disY + "px"; target.style.height = parseInt(params.height) - disY + "px"; target.style.width = parseInt(params.width) + disX + "px"; } else if (params.kind === "sw") { //左下拉伸 target.style.left = parseInt(params.left) + disX + "px"; target.style.width = parseInt(params.width) - disX + "px"; target.style.height = parseInt(params.height) + disY + "px"; } else if (params.kind === "se") { //右下拉伸 target.style.width = parseInt(params.width) + disX + "px"; target.style.height = parseInt(params.height) + disY + "px"; } else { //移动 target.style.left = parseInt(params.left) + disX + "px"; target.style.top = parseInt(params.top) + disY + "px"; } } document.onmouseup = function () { params.flag = false; if (getCss(target, "left") !== "auto") { params.left = getCss(target, "left"); } if (getCss(target, "top") !== "auto") { params.top = getCss(target, "top"); } params.width = getCss(target, "width"); params.height = getCss(target, "height"); /*console.log('params.width=', params.width); console.log('params.height', params.width);*/ //给隐藏文本框赋值 posX = parseInt(target.style.left); posY = parseInt(target.style.top); cropW = parseInt(target.style.width); cropH = parseInt(target.style.height); if (posX < 0) { posX = 0; } if (posY < 0) { posY = 0; } if ((posX + cropW) > iCurWidth) { cropW = iCurWidth - posX; } if ((posY + cropH) > iCurHeight) { cropH = iCurHeight - posY; } //赋值 ID("cropPosX").value = posX; ID("cropPosY").value = posY; ID("cropImageWidth").value = parseInt(ID("zxxCropBox").style.width); ID("cropImageHeight").value = parseInt(ID("zxxCropBox").style.height); /*console.log('posX=',posX); console.log('posY=',posY);*/ }; } }; }; //绑定拖拽 startDrag(ID("zxxDragBg"), ID("zxxCropBox"), "drag"); //绑定拉伸 startDrag(ID("dragLeftTop"), ID("zxxCropBox"), "nw"); startDrag(ID("dragLeftBot"), ID("zxxCropBox"), "sw"); startDrag(ID("dragRightTop"), ID("zxxCropBox"), "ne"); startDrag(ID("dragRightBot"), ID("zxxCropBox"), "se"); startDrag(ID("dragTopCenter"), ID("zxxCropBox"), "n"); startDrag(ID("dragBotCenter"), ID("zxxCropBox"), "s"); startDrag(ID("dragRightCenter"), ID("zxxCropBox"), "e"); startDrag(ID("dragLeftCenter"), ID("zxxCropBox"), "w"); //图片不能被选中，目的在于使拖拽顺滑 ID("myCanvas").onselectstart = function () { return false; }; img.onselectstart = function () { return false; }; });尝试过论坛里一些大佬的转换函数，但是均无果。
共有2个答案
Pointer events 指针事件
指针事件（Pointer Events）是一种用于处理来自各种输入设备（例如鼠标、触控笔和触摸屏等）的输入信息的现代化解决方案。
不太明白转换是啥意思。
不是应该先识别当前是 手机端还是电脑端
手机端直接使用 touch touchMove touched 这些方法就好了吗
-
本文向大家介绍vue自定义移动端touch事件之点击、滑动、长按事件，包括了vue自定义移动端touch事件之点击、滑动、长按事件的使用技巧和注意事项，需要的朋友参考一下 用法： js核心内容 2018-03-08 有朋友提出一个bug “v-for循环 生命周期后 获取不到新值 比如更新了数据” 这个问题是v-for的就地复用机制导致的，也就是可以复用的dom没有重复渲染，官方给出的方法是需要为
-
问题内容： 我想知道NCurses中是否存在诸如鼠标移动事件之类的事情，以及是否有办法捕获它们。在与鼠标接口之后（来自NCurses编程HOWTO），似乎通过启用对的调用，可以确实捕获鼠标移动事件。 因此，我尝试了一下，但似乎没有用。我有这样的事情： 我期望随着鼠标光标的移动，事件计数器将增加。但事实并非如此。我还尝试在按下鼠标按钮1的同时将其移动，以查看是否生成“拖动”事件，并且它也没有执行任何
-
本文向大家介绍javascript触发模拟鼠标点击事件，包括了javascript触发模拟鼠标点击事件的使用技巧和注意事项，需要的朋友参考一下 事件触发器就是用来触发某个元素下的某个事件，IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。 一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事
-
问题内容： 是否可以在页面加载后使用JavaScript获取鼠标位置而没有任何鼠标移动事件（不移动鼠标）？ 问题答案： 真正的答案：不，不可能。 好的，我刚刚想到了一种方法。用覆盖整个文档的div覆盖页面。在其中，创建（例如）2,000 x 2,000个元素（以便该伪类将在IE 6中运行），每个元素的大小为1像素。为那些更改属性的元素创建CSS 规则（比如说）。在您的负载处理程序中，循环浏览这40
-
本文向大家介绍JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例，包括了JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例的使用技巧和注意事项，需要的朋友参考一下 JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 以上这篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支
-
问题内容： 默认情况下，事件一键启动。我有一个，但我想从双击开始。可能吗？ 问题答案： 我相信您可以从MouseEvent中提取点击计数（假设其名为e） 试试这个