blocks|key|751799|text|如何侦听文档上的mousemove事件。然后，直到您听到该事件，您假定该设备是触摸或键盘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|751800|var+mouseDetected+=+false;
function+onMouseMove(e)+{
++unlisten('mousemove',+onMouseMove,+false);
++mouseDetected+=+true;
++//+initializeMouseBehavior();
}
listen('mousemove',+onMouseMove,+false);|code-block|syntax|javascript|751801|(其中listen和unlisten根据需要委派给addEventListener或attachEvent。)|offset|length|style|CODE|751802|希望这不会导致太多的视觉干扰，如果你需要基于模式的大量重新布局，那就太糟糕了。|751803|entityMap^0|0|0|3|6|A|8|P|G|16|B|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]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

<p>How about listening for a mousemove event on the document.  Then until you hear that event you assume that the device is touch or keyboard only.</p>

<pre><code>var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  // initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);
</code></pre>

<p>(Where <code>listen</code> and <code>unlisten</code> delegate to <code>addEventListener</code> or <code>attachEvent</code> as appropriate.)</p>

<p>Hopefully this wouldn't lead to too much visual jank, it would suck if you need massive re-layouts based on mode...</p>


blocks|key|535414|text|我强烈建议不要使用这种方法。考虑到触摸屏、桌面大小的设备，您将有一组不同的问题需要解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535415|请使您的应用程序在没有鼠标的情况下可用(即没有悬停预览)。|535416|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I'd strongly recommend against this approach. Consider touch-screen, desktop-sized devices, and you have a different set of problems to solve.</p>

<p>Please make your app usable without a mouse (i.e. no hover preview).</p>


blocks|key|535470|text|既然您计划提供一种在界面之间进行切换的方法，那么简单地要求用户单击一个链接或按钮来“输入”应用程序的正确版本是否可行？然后你就可以记住他们对未来访问的偏好。它不是高科技，但它是100%25可靠的:-)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535471|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Since you're planning to offer a way to switch between the interfaces anyway, would it be feasible to simply ask the user to click a link or a button to "enter" the correct version of the application? Then you could remember their preference for future visits. It's not high-tech, but it's 100% reliable :-)</p>


blocks|key|535515|text|我在这里看到的主要问题是，大多数触摸设备在触发相应的触摸事件(touchstart+->+mousedown、touchmove+->+mousemove等)的同时，也会触发一个鼠标事件。对于只有键盘的那些，最后对于现代的，它们有一个通用的浏览器，所以你甚至不能检测到MouseEvent类的存在。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535516|在我看来，这里不那么痛苦的解决方案是，在启动时显示一个菜单(只对键盘用户使用'alt‘管理)，并可能将选择存储在localStorage/cookies/serverside中，或者在下次访问者到来时保留相同的选择。|535517|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>the main problem I see here is that most touch devices fire a mouse event along with the coresponding touch one (touchstart -> mousedown, touchmove -> mousemove, etc). 
For the keyboard only ones, at last for the modern ones, they have a generic browser so you can't even detect the presence of the MouseEvent class.</p>

<p>The less painful solution here would be, in my opinion, to display a menu at launch (with 'alt' management for the keyboard only users) and maybe storing the choice with localStorage/cookies/serverside or else to keep the same choice the next time the visitor comes.</p>


blocks|key|752014|text|为什么你不直接检测它是否具有感知触摸和/或对鼠标移动做出反应的能力？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|752015|//+This+will+also+return+false+on
//+touch-enabled+browsers+like+Chrome
function+has_touch()+{
++return+!!('ontouchstart'+in+window);
}

function+has_mouse()+{
++return+!!('onmousemove'+in+window);
}|code-block|syntax|javascript|752016|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why don't you just detect if it has the ability to sense touches and/or to react to mouse movements?</p>

<pre><code>// This will also return false on
// touch-enabled browsers like Chrome
function has_touch() {
  return !!('ontouchstart' in window);
}

function has_mouse() {
  return !!('onmousemove' in window);
}
</code></pre>


blocks|key|752038|text|我认为不可能识别纯触摸式设备(当然，据我所知)。主要的问题是所有的鼠标和键盘事件也都是由触摸设备触发的。请参阅以下示例，两个警报都会为触摸设备返回true。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|752039|function+is_touch_present()+{
++return+('ontouchstart'+in+window)+%7C%7C+('onmsgesturechange'+in+window);
}

function+is_mouse_present()+{
++return+(('onmousedown'+in+window)+&&+('onmouseup'+in+window)+&&+('onmousemove'+in+window)+&&+('onclick'+in+window)+&&+('ondblclick'+in+window)+&&+('onmousemove'+in+window)+&&+('onmouseover'+in+window)+&&+('onmouseout'+in+window)+&&+('oncontextmenu'+in+window));
}

alert("Touch+Present:+"+%2B+is_touch_present());
alert("Mouse+Present:+"+%2B+is_mouse_present());|code-block|syntax|javascript|752040|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I don't think it's possible to identify touch-only device (to my knowledge of course). The main issue is all mouse and keyboard events are fired by touch devices too.
See the following example, both alerts return true for touch devices.</p>

<pre><code>function is_touch_present() {
  return ('ontouchstart' in window) || ('onmsgesturechange' in window);
}

function is_mouse_present() {
  return (('onmousedown' in window) &amp;&amp; ('onmouseup' in window) &amp;&amp; ('onmousemove' in window) &amp;&amp; ('onclick' in window) &amp;&amp; ('ondblclick' in window) &amp;&amp; ('onmousemove' in window) &amp;&amp; ('onmouseover' in window) &amp;&amp; ('onmouseout' in window) &amp;&amp; ('oncontextmenu' in window));
}

alert("Touch Present: " + is_touch_present());
alert("Mouse Present: " + is_mouse_present());
</code></pre>


blocks|key|752115|text|在我看来，最好的想法是mousemove+listener+(目前是最好的答案)。我认为这个方法需要稍微调整一下。确实，基于触摸的浏览器甚至会模拟鼠标移动事件，正如您在this+iOS+discussion中所看到的，因此我们应该稍微小心一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|752116|基于触摸的浏览器只有在用户点击屏幕(用户手指按下)时才会模拟此事件，这是有道理的。这意味着我们应该在mousemove处理程序期间添加一个测试，以查看在事件期间哪个鼠标按键被按下(如果有)。如果没有鼠标按键按下，我们可以安全地假设存在真正的鼠标。如果按下鼠标按钮，则测试仍不确定。|752117|那么这将如何实现呢？这个question表明，检查鼠标移动过程中哪个鼠标按键按下的最可靠方法是在文档级实际侦听3个事件:+mousemove、mousedown和mouseup。向上和向下将仅设置全局布尔标志。移动将执行测试。如果您有一个移动，并且布尔值为false，我们可以假定存在鼠标。有关确切的代码示例，请参阅问题。|752118|最后一点意见..这个测试并不理想，因为它不能在加载时执行。因此，我将使用前面建议的渐进式增强方法。默认情况下，显示不支持鼠标特定悬停界面的版本。如果发现鼠标，请在运行时使用JS启用此模式。这对用户来说应该是尽可能无缝的。|752119|为了支持用户配置的更改(即鼠标已断开连接)，您可以定期重新测试。虽然我认为在这种情况下，简单地通知用户这两种模式并让用户手动在这两种模式之间切换会更好(就像移动/桌面选择一样，它总是可以颠倒)。|752120|entityMap|0|LINK|mutability|MUTABLE|url|http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html|1|https://stackoverflow.com/questions/4065992/jquery-detecting-pressed-mouse-button-during-mousemove-event^0|B|9|2C|J|0|0|0|C|8|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|19|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]|V|$5|Q|R|S|E|$T|W]]]]

<p>The best idea in my opinion is the <code>mousemove</code> listener (currently the top answer). I believe that this method needs to be tweaked a bit. It is true that touch-based browsers emulate even the mousemove event, as you can see in <a href="http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html" rel="nofollow noreferrer">this iOS discussion</a>, so we should be a little careful.</p>

<p>It makes sense that touch-based browsers will only emulate this event when the user taps the screen (the user's finger is down). This means we should add a test during our mousemove handler to see which mouse button is down (if any) during the event. If no mouse button is down, we can safely assume a real mouse is present. If a mouse button is down, the test remains inconclusive.</p>

<p>So how would this be implemented? This <a href="https://stackoverflow.com/questions/4065992/jquery-detecting-pressed-mouse-button-during-mousemove-event">question</a> shows that the most reliable method to examine which mouse button is down during a mousemove is to actually listen for 3 events in document level: mousemove, mousedown and mouseup. The up and down will only set a global boolean flag. The move will perform the test. If you have a move and the boolean is false, we can assume a mouse is present. See question for exact code examples.</p>

<p>One final comment.. This test isn't ideal because it can't be performed in load time. Therefore, I would use a progressive enhancement method as previously suggested. By default show a version which does not support the mouse-specific hover interface. If a mouse is discovered, enable this mode in runtime using JS. This should appear as seamless as possible to the user.</p>

<p>In order to support changes in the user's configuration (ie mouse has been disconnected), you can periodically re-test. Although I believe it will be better in this case to simply notify the user about the 2 modes and let users manually switch between them (much like the mobile/desktop choice which can always be reversed).</p>


blocks|key|535734|text|在不同的PC，Linux，iPhone，Android手机和平板电脑上运行了一些测试。奇怪的是，没有简单的防弹解决方案。当一些有触摸屏但没有鼠标的应用程序仍然显示触摸屏和鼠标事件时，就会出现问题。由于确实希望支持仅限鼠标和仅限触摸的实例，因此希望同时处理这两个实例，但这会导致出现两次用户交互。如果可以知道设备上没有鼠标，则可以知道忽略假鼠标事件/插入鼠标事件。已尝试在遇到MouseMove时设置标志，但某些浏览器抛出假MouseMove以及MouseUp和MouseDown。尝试检查时间戳，但认为这太冒险了。结论:我发现创建假鼠标事件的浏览器总是在插入的MouseDown之前插入一个MouseMove。在我的99.99%25的案例中，当运行在有真正鼠标的系统上时，有多个连续的MouseMove事件-至少两个。因此，请跟踪系统是否遇到两个连续的MouseMove事件，如果从未满足此条件，则声明没有鼠标。这可能太简单了，但它适用于我所有的测试设置。我想我会坚持下去，直到我找到更好的解决方案。--+Jim+W|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535735|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Ran some tests on various PC's, Linux's, iPhone, Android phones and tabs.  Weird that there is no easy bullet-proof solution.  Problem arises when some that have Touch and no mouse still present Touch and Mouse events to application.  Since do want to support mouse-only and touch-only instances, want to process both, but this causes double occurrences of user interactions.  If can know mouse is not present on device, then can know to ignore fake/inserted mouse events.  Tried setting flag if MouseMove is encountered, but some browsers throw fake MouseMove as well as MouseUp and MouseDown.  Tried examining timestamps but figured this was too risky.  Bottom line: I found the browsers that created the fake mouse events always inserted a single MouseMove just prior to the inserted MouseDown.  In 99.99% of my cases, when running on a system that has a real mouse, there are multiple consecutive MouseMove events - at least two.  So, keep track of whether system encounters two consecutive MouseMove events and declare there is no mouse present if this condition is never met.  This is probably too simple, but its working on all my test setups.  Think I'll stick with it until I find a better solution. - Jim W</p>


blocks|key|535803|text|jQuery中检测鼠标使用的简单解决方案，它解决了移动设备也会触发“mousemove”事件的问题。只需添加一个touchstart侦听器来删除mousemove侦听器，这样它就不会在触摸时被触发。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535804|$('body').one('touchstart.test',+function(e)+{
++//+Remove+the+mousemove+listener+for+touch+devices
++$('body').off('mousemove.test');
}).one('mousemove.test',+function(e)+{
++//+MOUSE!
});|code-block|syntax|javascript|535805|当然，设备仍然可以是触摸和鼠标，但以上将保证使用的是真正的鼠标。|535806|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|$]]

<p>A simple solution in jQuery to detect mouse usage, which solves the issue where mobile devices also trigger 'mousemove' event. Simply add a touchstart listener to remove the mousemove listener, so that it doesn't get triggered on touch.</p>

<pre><code>$('body').one('touchstart.test', function(e) {
  // Remove the mousemove listener for touch devices
  $('body').off('mousemove.test');
}).one('mousemove.test', function(e) {
  // MOUSE!
});
</code></pre>

<p>Of course, the device could still be touch AND mouse, but the above will guarantee that a real mouse was used.</p>


blocks|key|535875|text|这对我来说在类似的情况下也是有效的。基本上，假设用户没有鼠标，直到你看到一小段连续的鼠标移动，没有鼠标向下或鼠标向上移动。不是很优雅，但很管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535876|var+mousedown+=+false;
var+mousemovecount+=+0;
function+onMouseDown(e){
++++mousemovecount+=+0;
++++mousedown+=+true;
}
function+onMouseUp(e){
++++mousedown+=+false;
++++mousemovecount+=+0;
}
function+onMouseMove(e)+{
++++if(!mousedown)+{
++++++++mousemovecount%2B%2B;
++++++++if(mousemovecount+>+5){
++++++++++++window.removeEventListener('mousemove',+onMouseMove,+false);
++++++++++++console.log("mouse+moved");
++++++++++++$('body').addClass('has-mouse');
++++++++}
++++}+else+{
++++++++mousemovecount+=+0;
++++}
}
window.addEventListener('mousemove',+onMouseMove,+false);
window.addEventListener('mousedown',+onMouseDown,+false);
window.addEventListener('mouseup',+onMouseUp,+false);|code-block|syntax|javascript|535877|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me in a similar situation. Basically, assume the user doesn't have a mouse until you see a short series of consecutive mousemoves, without intervening mousedowns or mouseups. Not very elegant, but it works.</p>

<pre><code>var mousedown = false;
var mousemovecount = 0;
function onMouseDown(e){
    mousemovecount = 0;
    mousedown = true;
}
function onMouseUp(e){
    mousedown = false;
    mousemovecount = 0;
}
function onMouseMove(e) {
    if(!mousedown) {
        mousemovecount++;
        if(mousemovecount &gt; 5){
            window.removeEventListener('mousemove', onMouseMove, false);
            console.log("mouse moved");
            $('body').addClass('has-mouse');
        }
    } else {
        mousemovecount = 0;
    }
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
</code></pre>


blocks|key|752426|text|刚刚找到了一个我认为非常优雅的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|752427|//+flag+as+mouse+interaction+by+default
var+isMouse+=+true;

//+detect+a+touch+event+start+and+flag+it
$(window).on('touchstart',+function+()+{
++//+if+triggers+touchstart,+toggle+flag
++//+since+touch+events+come+before+mouse+event+/+click
++//+callback+of+mouse+event+will+get+in+callback
++//+`isMouse+===+false`
++isMouse+=+false;
});

//+now+the+code+that+you+want+to+write
//+should+also+work+with+`mouse*`+events
$('a.someClass').on('click',+function+()+{
++if+(isMouse)+{
++++//+interaction+with+mouse+event
++++//+...
++}+else+{
++++//+reset+for+the+next+event+detection
++++//+this+is+crucial+for+devices+that+have+both
++++//+touch+screen+and+mouse
++++isMouse+=+true;

++++//+interaction+with+touch+event
++++//+...
++}
});|code-block|syntax|javascript|752428|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just found a solution that I think is quite elegant.</p>

<pre><code>// flag as mouse interaction by default
var isMouse = true;

// detect a touch event start and flag it
$(window).on('touchstart', function () {
  // if triggers touchstart, toggle flag
  // since touch events come before mouse event / click
  // callback of mouse event will get in callback
  // `isMouse === false`
  isMouse = false;
});

// now the code that you want to write
// should also work with `mouse*` events
$('a.someClass').on('click', function () {
  if (isMouse) {
    // interaction with mouse event
    // ...
  } else {
    // reset for the next event detection
    // this is crucial for devices that have both
    // touch screen and mouse
    isMouse = true;

    // interaction with touch event
    // ...
  }
});
</code></pre>


blocks|key|535974|text|我遇到了同样的问题，一次触摸也被注册为点击。在我阅读了投票最多的答案的评论后，我提出了自己的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535975|​|535976|var+body+=+document.getElementsByTagName('body')[0];
var+mouseCount+=+0;

//+start+in+an+undefined+state+
//+(i+use+this+to+blend+in+elements+once+we+decide+what+input+is+used)
var+interactionMode+=+'undefined';


var+registerMouse+=+function()+{
++//+count+up+mouseCount+every+time,+the+mousemove+event+is+triggered
++mouseCount%2B%2B;

++//+but+dont+set+it+instantly.+
++//+instead+wait+20+miliseconds+(seems+to+be+a+good+value+for+multiple+move+actions),+
++//+if+another+mousemove+event+accoures+switch+to+mouse+as+interaction+
++setTimeout(function()+{
++++//+a+touch+event+triggers+also+exactly+1+mouse+move+event.
++++//+So+only+if+mouseCount+is+higher+than+1+we+are+really+moving+the+cursor+by+mouse.
++++if+(mouseCount+>+1)+{
++++++body.removeEventListener('mousemove',+registerMouse);
++++++body.removeEventListener('touchend',+registerTouch);

++++++interactionMode+=+'mouse';
++++++console.log('now+mousing');
++++++listenTouch();
++++}

++++//+set+the+counter+to+zero+again
++++mouseCount+=+0;
++},+20);
};

var+registerTouch+=+function()+{
++body.removeEventListener('mousemove',+registerMouse);
++body.removeEventListener('touchend',+registerTouch);

++interactionMode+=+'touch';
++console.log('now+touching');
++mouseCount+=+0;

++listenMouse();
};

var+listenMouse+=+function()+{
++body.addEventListener("mousemove",+registerMouse);
};
var+listenTouch+=+function()+{
++body.addEventListener("touchend",+registerTouch);
};

listenMouse();
listenTouch();

//+after+one+second+without+input,+assume,+that+we+are+touching
//+could+be+adjusted+to+several+seconds+or+deleted
//+without+this,+the+interactionMode+would+stay+'undefined'+until+first+mouse+or+touch+event
setTimeout(function()+{
++if+(!body.classList.contains('mousing')+%7C%7C+body.classList.contains('touching'))+{
++++registerTouch();
++}
},+1000);|code-block|syntax|javascript|535977|/*+fix,+so+that+scrolling+is+possible+*/

html,
body+{
++height:+110%25;
}|535978|Mouse+or+touch+me|535979|535980|我发现的唯一问题是，你必须能够滚动，才能正确检测触摸事件。单个选项卡(触摸)可能会产生问题。|535981|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>I ran into the same issue, where a single touch was also registered as a click.
After I read through the comments of top voted answers, i came up with my own solution:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var body = document.getElementsByTagName('body')[0];
var mouseCount = 0;

// start in an undefined state 
// (i use this to blend in elements once we decide what input is used)
var interactionMode = 'undefined';


var registerMouse = function() {
  // count up mouseCount every time, the mousemove event is triggered
  mouseCount++;

  // but dont set it instantly. 
  // instead wait 20 miliseconds (seems to be a good value for multiple move actions), 
  // if another mousemove event accoures switch to mouse as interaction 
  setTimeout(function() {
    // a touch event triggers also exactly 1 mouse move event.
    // So only if mouseCount is higher than 1 we are really moving the cursor by mouse.
    if (mouseCount &gt; 1) {
      body.removeEventListener('mousemove', registerMouse);
      body.removeEventListener('touchend', registerTouch);

      interactionMode = 'mouse';
      console.log('now mousing');
      listenTouch();
    }

    // set the counter to zero again
    mouseCount = 0;
  }, 20);
};

var registerTouch = function() {
  body.removeEventListener('mousemove', registerMouse);
  body.removeEventListener('touchend', registerTouch);

  interactionMode = 'touch';
  console.log('now touching');
  mouseCount = 0;

  listenMouse();
};

var listenMouse = function() {
  body.addEventListener("mousemove", registerMouse);
};
var listenTouch = function() {
  body.addEventListener("touchend", registerTouch);
};

listenMouse();
listenTouch();

// after one second without input, assume, that we are touching
// could be adjusted to several seconds or deleted
// without this, the interactionMode would stay 'undefined' until first mouse or touch event
setTimeout(function() {
  if (!body.classList.contains('mousing') || body.classList.contains('touching')) {
    registerTouch();
  }
}, 1000);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* fix, so that scrolling is possible */

html,
body {
  height: 110%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Mouse or touch me</code></pre>
</div>
</div>
</p>

<p>The only problem i found is, that you have to be able to scroll, to properly detect a touch event. a single tab(touch) might make problems.</p>


blocks|key|752511|text|我花了几个小时为我的Phonegap应用程序解决这个问题，然后我想出了这个技巧。如果触发的事件是“被动”事件，它会生成一个控制台警告，这意味着它不会激活任何更改，但它是有效的！我会对任何改进的想法或更好的方法感兴趣。但这实际上允许我普遍使用$.touch()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|752512|​|752513|$(document).ready(function(){
++$("#aButton").touch(function(origElement,+origEvent){
++++console.log('Original+target+ID:+'+%2B+$(origEvent.target).attr('id'));
++});
});

$.fn.touch+=+function+(callback)+{
++++var+touch+=+false;
++++$(this).on("click",+function(e){
++++++++if+(!touch)
++++++++{
++++++++++++console.log("I+click!");
++++++++++++let+callbackReal+=+callback.bind(this);
++++++++++++callbackReal(this,+e);
++++++++}else{
++++++++++++touch+=+true;
++++++++}
++++++++touch+=+false;
++++});
++++$(this).on("touchstart",+function(e){
++++++++if+(typeof+e.touches+!=+typeof+undefined)
++++++++{
++++++++++++e.preventDefault();
++++++++++++touch+=+true;
++++++++++++console.log("I+touch!");
++++++++++++let+callbackReal+=+callback.bind(this);
++++++++++++callbackReal(this,+e);
++++++++}
++++});
}|code-block|syntax|javascript|752514|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button+id="aButton">A+Button</button>|752515|752516|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I spent hours figuring out this problem for my Phonegap app and I came up with this hack. It generates a console warning if the event triggered is a "passive" event, meaning it doesn't actuate any change, but it works! I would be interested in any ideas to improve or a better method. But this effectively allows my to use $.touch() universally.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $("#aButton").touch(function(origElement, origEvent){
    console.log('Original target ID: ' + $(origEvent.target).attr('id'));
  });
});

$.fn.touch = function (callback) {
    var touch = false;
    $(this).on("click", function(e){
        if (!touch)
        {
            console.log("I click!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }else{
            touch = true;
        }
        touch = false;
    });
    $(this).on("touchstart", function(e){
        if (typeof e.touches != typeof undefined)
        {
            e.preventDefault();
            touch = true;
            console.log("I touch!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }
    });
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;button id="aButton"&gt;A Button&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|536072|text|运行代码片段(如下所示)进行试验：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|536073|var+msg+=+(window.matchMedia("(any-pointer:+coarse)").matches+?+"Touchscreen"+:+"Mouse");|code-block|syntax|javascript|536074|​|536075|var+msg+=+(window.matchMedia("(any-pointer:+coarse)").matches+?+"Touchscreen"+:+"Mouse");
document.getElementById('info').innerHTML+=+msg;|536076|body+{
++background:+black;
++color:+cornflowerblue;
}

#info+{
++position:+absolute;
++left:+50%25;
++top:+50%25;
++transform:+translate(-50%25,+-50%25);
++font-size:+30vmin;
++font-family:+verdana,+arial,+helvetica;
}|536077|<div+id='info'></div>|536078|536079|(这里有更多关于window.matchMedia的信息。)|offset|length|style|CODE|536080|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/docs/Web/API/Window/matchMedia^0|0|0|0|0|0|0|0|8|H|8|H|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|O|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@$R|1B|S|1C|T|U]]|9|@$R|1D|S|1E|1|1F]]|A|$]]|$1|V|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>Run the snippet (below) to try this out:</p>
<pre><code>var msg = (window.matchMedia(&quot;(any-pointer: coarse)&quot;).matches ? &quot;Touchscreen&quot; : &quot;Mouse&quot;);
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var msg = (window.matchMedia("(any-pointer: coarse)").matches ? "Touchscreen" : "Mouse");
document.getElementById('info').innerHTML = msg;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background: black;
  color: cornflowerblue;
}

#info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 30vmin;
  font-family: verdana, arial, helvetica;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='info'&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>(Here's more info about <a href="https://developer.mozilla.org/docs/Web/API/Window/matchMedia" rel="nofollow noreferrer"><code>window.matchMedia</code></a>.)</p>


<p>I'm developing a webapp (not a website with pages of interesting text) with a very different interface for touch (your finger hides the screen when you click) and mouse (relies heavily on hover preview).
How can I detect that my user has no mouse to present him the right interface? I plan to leave a switch for people with both mouse and touch (like some notebooks). </p>

<p>The touch event capability in the browser doesn't actually mean the user is using a touch device (for example, Modernizr doesn't cut it).  The code that correctly answers the question should return false if the device has a mouse, true otherwise. For devices with mouse and touch, it should return false (not touch only)</p>

<p>As a side note, my touch interface might also be suitable for keyboard-only devices, so it's more the lack of mouse I'm looking to detect.</p>

<p>To make the need more clear, here is the API that I'm looking to implement:</p>

<pre><code>// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);
</code></pre>


Detecting that the browser has no mouse and is touch-only

Android

jQuery

Linux

我正在开发一个网页应用程序(不是一个有很多有趣的文本页面的网站)，它有一个非常不同的触摸界面(点击时你的手指会隐藏屏幕)和鼠标(很大程度上依赖于悬停预览)。我怎样才能检测到我的用户没有鼠标来显示正确的界面呢？我打算给同时有鼠标和触摸屏的人留一个开关(就像一些笔记本电脑一样)。浏览器中的触摸事件功能实际上并不意味着用户正...

问检测到浏览器没有鼠标并且只支持触摸
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测到浏览器没有鼠标并且只支持触摸EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测到浏览器没有鼠标并且只支持触摸
EN