首页 > 解决方案 > 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 来改变任何东西。我该如何解决这个问题

标签: javascriptjqueryhtml

解决方案


推荐阅读