如何使用桌面浏览器测试触摸事件?

问题描述

我想为触摸事件编写一些测试用例.在我的代码中，我有以下逻辑来决定它是否在触摸设备上.

I want to write some test cases for touch events. In my code I have the following logic to decide whether it is on touch devices.

if(document.documentElement.ontouchstart !== undefined)
{
 //content that I want to write test cases about
}

现在我想把document.documentElement.ontouchstart伪装成不是undefined，这样内部逻辑就会被执行.

Now I want to fake document.documentElement.ontouchstart not to be undefined, so the inside logic will be executed.

我尝试使用Sinon.js 的stub 为document.documentElement.ontouchstart 分配一个空函数.但它会抛出一个错误指示TypeError: Attempted to wrap undefined property ontouchstartas function"因为document.documentElement在浏览器中没有这样的属性.

I tried using Sinon.js's stub to assign an empty function to document.documentElement.ontouchstart. But it will throw an error indication "TypeError: Attempted to wrap undefined property ontouchstartas function" since document.documentElement has no such property in browser.

我真的不想在我的测试中写类似:document.documentElement.ontouchstart = function() {..} 因为它会影响其他测试用例.当然我可以存储它的原始值，并在测试用例结束时恢复该值.但我想问一下，有没有更优雅的方法来实现这一点?

I really don't want to write something like: document.documentElement.ontouchstart = function() {..} in my test since it will effect other test cases. Of course I can store the original value of it and restore the value when the test case is over. But I wanna to ask, is there any more elegant way to achieve this?

如何让它进入if语句?

推荐答案

使用 Chrome 的设备工具，通过在开发者工具中激活此按钮来切换.

use Chrome's device tool, toggling by activating this button in developer's tool.

作为图像

这使您可以像在移动环境中一样进行调试.

This allows you to debug like in a mobile environment.

这篇关于如何使用桌面浏览器测试触摸事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！