JS =>处理单击事件与拖动事件并存

时间:2023-03-09 07:41:02
JS =>处理单击事件与拖动事件并存

使用click事件,很难确定在拖动开始和结束的时候触发,所以使用了onmouseup(释放鼠标的时候),释放鼠标的时候,即在拖动还未结束,但是准备处理的阶段,此时mouseButtonFlag按照逻辑来说应该是true,即不会触发绑定的事件。

1.将click转为使用onmouseup事件

2.添加mouseButtonFlag对象,判断是否拖拽情况,用以处理是否触发鼠标释放(点击)事件

(这个是篇sortable的参数说明的文章,作者xpsharphttp://blog.****.net/xpsharp/article/details/6906228

需要处理的是,拖动图片的时候,不能触发点击事件

JS =>处理单击事件与拖动事件并存

 <ul class="alist ui-sortable" id="acAlbums">
<!--加载相册--> <li>
<div class="closed"></div>
<div class="media1">
<a href="#_">
<img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c0f208bde2f43c2284e2b28331912539c734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
</div>
</li><li style="position: relative; left: 0px; top: 0px;" class="">
<div class="closed"></div>
<div class="media1">
<a href="#_">
<img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c9474269a0c6f49fc58f17296ca8f10dd734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
</div>
</li><li style="position: relative; left: 0px; top: 0px;" class="">
<div class="closed"></div>
<div class="media1">
<a href="#_">
<img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c0f208bde2f43c2284e2b28331912539c734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
</div>
</li><li style="position: relative; left: 0px; top: 0px;" class="">
<div class="closed"></div>
<div class="media1">
<a href="#_">
<img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c0f208bde2f43c2284e2b28331912539c734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
</div>
</li>
<li style="position: relative; left: 0px; top: 0px;" class="">
<div class="closed"></div>
<div class="media1">
<a href="#_">
<img src="/Content/Images/Scene/Gather204/banner.jpg" alt="" url="http://www.ttyouni.com/" onmouseup="openImageSetDialog(this)" width="50"></a>
</div>
</li> <li class="add">
<a href="javascript:;">
<img src="/Content/Images/Scene/Vote004/jia.jpg" onclick="openImageSetDialog(this,1)" width="50">
</a>
</li>
</ul>

html

处理的JS

var mouseButtonFlag = false;//控制是否触发点击事件
//拖动
$('#acAlbums').sortable({
items: "li:not(.add)",
start: function (event, ui) {
mouseButtonFlag = true;
},
stop: function (event, ui) {
mouseButtonFlag = false;
}
}); //打开轮播图片设置的弹窗
function openImageSetDialog(obj,v) {
if (mouseButtonFlag) {
return;
}
if (v!=undefined) {//添加图片对象
$("#show_image_1").attr("src", "/Content/Images/Scene/Vote004/jia.jpg");
$("#image_url_txt").val("http://ttyouni.com/show/index")
}
else {
$("#show_image_1").attr("src", $(obj).attr("src"));
$("#image_url_txt").val($(obj).attr("url"))
}
$("#image_index_txt").val($(obj).parents("#acAlbums li").index())
$("#choose_activebox1").show();
}