我在移动设备上有一个可滚动的列表.他们希望人们能够通过滑动滚动列表,并通过点击选择一行.
抓住了两者.如果您实际滚动列表,我不希望选择一行.这是我发现的:
滚动时不触发:
滚动时是否触发:
简单的解决方案就是坚持点击事件.但我们发现,在某些黑莓设备上,touchstart之间存在非常明显的延迟,然后触发点击或鼠标.这种延迟足以使其在这些设备上无法使用.
所以这给我们留下了其他选择.但是,使用这些选项,您可以滚动列表而不触发您触摸的行以启动滚动.
解决此问题的最佳做法是什么?
我正在试图弄清楚如何解决滚动时分配给元素的tapped类,但它生效太快了我需要在实际触摸时稍微延迟它而不是在滚动时触摸,这是我的代码这个怎么运作:
$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
var self = $(this);
self.addClass(self.data('tappable-role'));
}).bind('touchend', function()
{
var self = $(this);
self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
var self = $(this),
goTo = self.data('goto');
if(typeof goTo !== 'undefined')
{
window.location = goTo;
}
});
Run Code Online (Sandbox Code Playgroud)
当滚动时,它会在我几乎没有碰到它时将类分配给元素,我想防止这种情况发生,除非它被正确触摸(没有点击).虽然我尝试使用setTimeout,但是因为它延迟但效果不好但它稍后仍将分配该类.
这是我用setTimeout做的方式:
var currentTapped;
$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
clearTimeout(currentTapped);
var self = $(this);
var currentTapped = setTimeout(function()
{
self.addClass(self.data('tappable-role'));
}, 60);
}).bind('touchend', function()
{
clearTimeout(currentTapped);
var self = $(this);
self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
clearTimeout(currentTapped);
var self = $(this),
goTo = …Run Code Online (Sandbox Code Playgroud) 我的代码采用鼠标位置。手机浏览器支持html5。但不能使用 MouseUp mouseDown 我该如何解决?
<!DOCTYPE HTML>
<html>
<head>
<body style="background-color:3F6E6F;">
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas>
<p id="demo"></p>
<script>
var depx = 0;
var depy = 0;
var flag = 0;
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: …Run Code Online (Sandbox Code Playgroud)javascript ×3
jquery ×2
scroll ×2
browser ×1
html ×1
iphone ×1
mobile ×1
touch ×1
touch-event ×1
touchscreen ×1