blocks|key|1439194|text|按照@Mickey+Shine的回答，Touch+Punch提供了触摸事件到点击事件的映射。它是为将此支持放入jQuery+UI而构建的，但the+code提供了丰富的信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1439195|entityMap|0|LINK|mutability|MUTABLE|url|http://touchpunch.furf.com/|1|https://github.com/furf/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js^0|J|B|0|1Y|8|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Along the lines of @Mickey Shine's answer, <a href="http://touchpunch.furf.com/" rel="nofollow noreferrer">Touch Punch</a> provides mapping of touch events to click events. It's built to put this support into jQuery UI, but <a href="https://github.com/furf/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js" rel="nofollow noreferrer">the code</a> is informative.

blocks|key|1224426|text|我最终找到了一种方法，使用Mickey的解决方案，而不是他的init函数。在这里使用init函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224427|function+init()+{
++++document.getElementById('filter_div').addEventListener("touchstart",+touchHandler,+true);
++++document.getElementById('filter_div').addEventListener("touchmove",+touchHandler,+true);
++++document.getElementById('filter_div').addEventListener("touchend",+touchHandler,+true);
++++document.getElementById('filter_div').addEventListener("touchcancel",+touchHandler,+true);
}|code-block|syntax|javascript|1224428|如果你看到'filter_div‘是图表区域，在那里我们有图表范围过滤器，并且只有在那个区域我们才想重写我们的触摸控件！|offset|length|style|CODE|1224429|谢谢你米奇。这是一个很好的解决方案。|1224430|entityMap^0|0|0|6|A|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I finally found a way to get this working using Mickey's solution but instead of his init function. Use the init function here.

<pre><code>function init() {
 document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true);
 document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true);
 document.getElementById('filter_div').addEventListener("touchend", touchHandler, true);
 document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true);
}
</code></pre>

If you see '<code>filter_div</code>' is the chart area where we have the chart range filter and only in that area do we want to rewrite our touch controls!

Thank you Mickey. It was a great solution.

blocks|key|1224467|text|对于回到这里的未来用户，可能会使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224468|var+eventMap+=+{};

(function(){
var+eventReplacement+=+{
++++"mousedown":+["touchstart+mousedown",+"mousedown"],
++++"mouseup":+["touchend+mouseup",+"mouseup"],
++++"click":+["touchstart+click",+"click"],
++++"mousemove":+["touchmove+mousemove",+"mousemove"]
};


for+(i+in+eventReplacement)+{
++++if+(typeof+window["on"+%2B+eventReplacement[i][0]]+==+"object")+{
++++++++eventMap[i]+=+eventReplacement[i][0];
++++}+
++++else+{
++++++++eventMap[i]+=+eventReplacement[i][1];
++++};
+};
})();|code-block|syntax|javascript|1224469|然后在事件中使用如下所示：|1224470|$(".yourDiv").on(eventMap.mouseup,+function(event)+{
++++++//your+code
}|1224471|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For future users, who comeback here the following code might be used :

<pre><code>var eventMap = {};

(function(){
var eventReplacement = {
 "mousedown": ["touchstart mousedown", "mousedown"],
 "mouseup": ["touchend mouseup", "mouseup"],
 "click": ["touchstart click", "click"],
 "mousemove": ["touchmove mousemove", "mousemove"]
};


for (i in eventReplacement) {
 if (typeof window["on" + eventReplacement[i][0]] == "object") {
 eventMap[i] = eventReplacement[i][0];
 } 
 else {
 eventMap[i] = eventReplacement[i][1];
 };
 };
})();
</code></pre>

And then in the events use like following :

<pre><code>$(".yourDiv").on(eventMap.mouseup, function(event) {
 //your code
}
</code></pre>

blocks|key|1224527|text|要使@Mickey的代码在Edge和internet+explorer上工作，请在您希望模拟发生的元素的.css中添加以下行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224528|.areaWhereSimulationHappens+{
++++overflow:+hidden;
++++touch-action:+none;
++++-ms-touch-action:+none;
}|code-block|syntax|javascript|1224529|这些线条阻止了edge和IE的默认触摸。但是如果你将它添加到错误的元素中，那么它也会禁用滚动(默认情况下，在边缘设备上会发生滚动，在触摸设备上会发生IE+)。|1224530|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For making @Mickey's code work on Edge and internet explorer, add the following lines in .css of the element where you want the simulation to happen: 

<pre><code>.areaWhereSimulationHappens {
 overflow: hidden;
 touch-action: none;
 -ms-touch-action: none;
}
</code></pre>

These lines prevent the default touch for edge and IE. But if you add it to the wrong element, then it also disables scroll (which happens by default on edge and IE on touch devices).

I'm using the YUI slider that operates with mouse move events. I want to make it respond to <code>touchmove</code> events (iPhone and Android). How can I produce a mouse move event when a <code>touchmove</code> event occurs? I'm hoping that just by adding some script at the top that <code>touchmove</code> events will get mapped to the mouse move events and I won't have to change anything with the slider.

JavaScript mapping touch events to mouse events

Android

jQuery

我使用的是YUI滑块，它可以操作鼠标移动事件。我想让它对touchmove事件(iPhone和Android)做出响应。当touchmove事件发生时，如何产生鼠标移动事件？我希望只需在顶部添加一些脚本，即可将touchmove事件映射到鼠标移动事件，而无需使用滑块进行任何更改。

问将触摸事件映射到鼠标事件的JavaScript
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将触摸事件映射到鼠标事件的JavaScriptEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将触摸事件映射到鼠标事件的JavaScript
EN