javascript - jquery mouseenter方法如何运行mobilde
问题描述
嗨,我写了单词选择器代码。代码在计算机上运行,但代码不在移动设备上运行。通过这样做解决触摸问题。我用touchstart改变了mousedown,用touchend改变了mouseup。但我找不到 mouseenter 来改变任何东西。我该如何解决这个问题
var mouseIsDown = false;
//mousedown
$(".table li").bind('mousedown touchstart', function(event) {
mouseIsDown = true;
$('.word').append($(this).text());
});
//mouseup
$(".table li").bind('mouseup touchend', function(event) {
mouseIsDown = false;
$(".word").empty();
});
// How can i mouseover, touch event
$(".table li").bind('mouseenter touch', function(event) {
if(mouseIsDown) {
$('.word').append($(this).text());
}
});
#tablo {width: 100%; text-align: center; background-color: #cccdd2; overflow: hidden; }
.table {text-align: center; overflow: hidden; padding: 20px;}
.table ul { list-style: none outside none; margin-bottom: -12px;}
.table li { position: relative; border-radius: 100px; display: inline; display: inline-block ; margin-right: -10px;}
.table li {width: 50px; height: 33px; margin: 2px; background-color: #666464; padding-top: 17px; font-family: Calibri; font-size: 15px; font-weight: bolder; color: #fff; }
.table li { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none;}
.table li:hover {background-color: red; }
.word { width: 100%; text-align: center;
background-color: black; border-radius: 20px 20px 0px 0px;
font-size: 25px;
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word"></div>
<div id="tablo">
<div class="">Please one word click and </div>
<div class="table">
<ul class="one">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<ul class="two">
<li>O</li>
<li>L</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
<ul class="one">
<li>C</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
</ul>
<ul class="one">
<li>K</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
</ul>
<ul class="one">
<li>U</li>
<li>V</li>
<li>X</li>
<li>Y</li>
<li>z</li>
</ul>
</div>
</div>
嗨,我写了单词选择器代码。代码在计算机上运行,但代码不在移动设备上运行。通过这样做解决触摸问题。我用touchstart改变了mousedown,用touchend改变了mouseup。但我找不到 mouseenter 来改变任何东西。我该如何解决这个问题
解决方案
推荐阅读
- java - SSH 会话同时发送环境变量和打开子系统
- r - 如何用两个面板复制情节?
- xml - 如果 xml 响应在响应中只有 1 个对象,则“匹配每个”检查从版本 1.0.0 开始测试失败
- android - 通过 Intent 共享照片时删除 EXIF 位置数据
- python - tmdbsimple:电影流派列表
- puppet - Puppet:在动态变量路径中访问 hashkey
- mongodb - 连接远程mongodb容器的地址是什么?
- javascript - 我最近从 webpack-4 升级到了 webpack-5。我无法正确获取捆绑包的名称
- sftp - SFTP 在 linux 命令行上工作,但 filezilla 失败
- graphics - SV_Position 的 w 分量代表什么?SV_Position 是 Pixel Shader (DirectX 11) 的输入