JQUERY | Mousedown和Mouseup

Question

您好我写了代码但代码不稳定。我做mousedown，选择代码字符，我做mouseup，仍然选择代码字符。  我想要鼠标点击保持。我的意思是mousedown方法。我想拖动并选择一个单词。就像Word Hunt Game

一样

问题是当我做mouseup仍然使用mousedown方法时。

请帮助

$( ".table li" ).mousedown(function() {
  $('.word').append($(this).text()); 
  $( ".table li" ).mouseenter(function() {
 
$('.word').append($(this).text());
});
   });
$( ".table li" ).mouseup(function() {
$(".word").empty();
   });

#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 find clock </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>

您好我写了代码但代码不稳定。我做mousedown，选择代码字符，我做mouseup，仍然选择代码字符。 请帮忙

Answer 1

在JavaScript代码中，当您触发mousedown时，您将创建一个新的eventListener，它始终在一个.table li元素的mouseenter上添加文本。创建eventListener之后，将始终触发此操作，直到您删除该eventListener。

但是，如果您只想在点击顶部的栏中添加文字，则可以触发点击事件。

我编辑了您的代码示例以实现此目的：

var mouseIsDown = false;

$(".table li").mousedown(function() {
  mouseIsDown = true;
  $('.word').append($(this).text());
});
$(".table li").mouseup(function() {
  mouseIsDown = false;
  $(".word").empty();
});

$(".table li").mouseenter(function() {
  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>

Answer 2

Mousedown和mouseup事件正常。并且在大多数浏览器中工作。在触摸设备中可能有问题。如果您想在触摸设备中使用它们，您可能需要点击和拍摄事件。请检查

jquerymobile http://demos.jquerymobile.com/1.0a2/#docs/api/events.html

您还可以检查jquery浏览器支持 http://jquery.com/browser-support/

如果您的浏览器不支持，您可以使用纯JavaScript来实现它。 https://www.w3schools.com/jsref/event_onmousedown.asp