我的应用程序中有一个字母滚动条(ASB),大多数智能手机都有他们的联系人应用程序.
现在,当我的手指touchstart点击等等在ASB上时,我没有问题滚动到特定的项目.
但是,我在智能手机上捕获悬停或鼠标悬停事件时遇到问题.
我已经尝试touchstart touchswipe touchend鼠标鼠标mousemove或悬停没有运气.
任何建议是赞赏.
解决方法
TL; DR; touchmove,touchstart和touchend是使这一切成为可能的事件.
我发现人们不断告诉我,非本地应用程序不可能在智能手机上提供悬停事件的功能.
但是,现代智能手机浏览器实际上提供了功能.我意识到解决方案字面上躺在一个非常简单的地方.而且几乎没有什么调整,我已经想到我可以模拟这种行为跨平台,即使它有点欺骗.
所以,大多数的工作人员都在传递有用户触摸屏幕所需的信息的参数.
例如
var touch = event.originalEvent.changedTouches[0]; var clientY = touch.clientY; var screenY = touch.screenY;
而且由于我知道ASB上每个按钮的高度,我只能计算用户将元素放在哪里.
这是CodePen在移动触摸设备上更容易尝试. (请注意,这只适用于触摸设备,您仍然可以在切换设备模式下使用chrome)
这是我的最终代码,
var $startElem,startY;
function updateInfo(char) {
$('#info').html('Hover is now on "' + char + '"');
}
$(function() {
var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');
for (var i = 0; i < strArr.length; i++) {
var $btn = $('<a />').attr({
'href': '#','class': 'btn btn-xs'
})
.text(strArr[i].toUpperCase())
.on('touchstart',function(ev) {
$startElem = $(this);
var touch = ev.originalEvent.changedTouches[0];
startY = touch.clientY;
updateInfo($(this).text());
})
.on('touchend',function(ev) {
$startElem = null;
startY = null;
})
.on('touchmove',function(ev) {
var touch = ev.originalEvent.changedTouches[0];
var clientY = touch.clientY;
if ($startElem && startY) {
var totalVerticalOffset = clientY - startY;
var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.
if (indexOffset > 0) {
$currentBtn = $startElem.nextAll().slice(indexOffset - 1,indexOffset);
if ($currentBtn.text()) {
updateInfo($currentBtn.text());
}
} else {
$currentBtn = $startElem.prevAll().slice(indexOffset - 1,indexOffset);
if ($currentBtn.text()) {
updateInfo($currentBtn.text());
}
}
}
});
$('#asb').append($btn);
}
});
#info {
border: 1px solid #adadad;
position: fixed;
padding: 20px;
top: 20px;
right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="info"> No hover detected </div> <div id="asb" class="btn-group-vertical"> </div>
