JQUERY|鼠标向下和鼠标向上

嗨，我写了代码，但代码不稳定。我做鼠标向下，选择代码字符，我做鼠标向上，仍然选择代码字符。我要鼠标点击按住。我的意思是鼠标关闭方法。我想拖动并选择一个单词。像一个猎字游戏

问题是当我做鼠标向上仍然工作鼠标关闭方法时。

请帮忙

$( ".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>

嗨，我写了代码，但代码不稳定。我做鼠标向下，选择代码字符，我做鼠标向上，仍然选择代码字符。请帮忙

在 JavaScript 代码上，当您触发鼠标按下时，您将创建一个新的 eventListener，该 eventListener 总是在鼠标输入一个.table li元素时添加文本。创建该事件侦听器后，将始终触发此操作，直到您删除该事件侦听器。

但是，如果您只想在单击时向顶部的栏添加文本，则可以触发单击事件。

我编辑了您的代码示例来完成此操作：

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>

鼠标按下和鼠标向上事件工作正常。并在大多数浏览器中工作。触摸设备可能有问题。如果要在触摸设备中使用它们，则可能需要点击和点击事件。请检查

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

相关内容

最新更新

热门标签：