JS = Handle Click events coexist with drag events

Source: Internet
Author: User

With the Click event, it is difficult to determine when the drag starts and ends when it is triggered, so use onmouseup (when releasing the mouse), release the mouse when the drag is not finished, but ready to process the stage, at which point Mousebuttonflag should be true logically, That is, the bound event is not triggered.

1. Switch Click to use onmouseup Event

2. Add the Mousebuttonflag object to determine whether or not to drag and drop the event to trigger a mouse release (click)

(This is an article of the sortable parameter description , author xpsharp,http://blog.csdn.net/xpsharp/article/details/6906228)

What needs to be handled is that when you drag a picture, you can't trigger a click event

1 <ulclass= "Alist ui-sortable"ID= "Acalbums">2                                                             <!--Loading Albums -3                                                                 4                                                                 5                                                                 <Li>6                                                                     <Divclass= "Closed"></Div>7                                                                     <Divclass= "Media1">8                                                                         <ahref="#_">9                                                                             <imgsrc= "http://file.ttyouni.com/image/ cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc324 8AA0A0C0F208BDE2F43C2284E2B28331912539C734556076D66B0BF "alt=""URL=""onmouseup= "Openimagesetdialog (this)"width= " the"></a>Ten                                                                     </Div> One                                                                 </Li><Listyle= "position:relative; left:0px; top:0px;"class=""> A                                                                     <Divclass= "Closed"></Div> -                                                                     <Divclass= "Media1"> -                                                                         <ahref="#_"> the                                                                             <imgsrc= "http://file.ttyouni.com/image/ cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc324 8AA0A0C9474269A0C6F49FC58F17296CA8F10DD734556076D66B0BF "alt=""URL=""onmouseup= "Openimagesetdialog (this)"width= " the"></a> -                                                                     </Div> -                                                                 </Li><binstyle= "position:relative; left:0px; top:0px;"class=""> -                                                                     <Divclass= "Closed"></Div> +                                                                     <Divclass= "Media1"> -                                                                         <ahref="#_"> +                                                                             <imgsrc= "http://file.ttyouni.com/image/ cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc324 8AA0A0C0F208BDE2F43C2284E2B28331912539C734556076D66B0BF "alt=""URL=""onmouseup= "Openimagesetdialog (this)"width= " the"></a> A                                                                     </Div> at                                                                 </Li><binstyle= "position:relative; left:0px; top:0px;"class=""> -                                                                     <Divclass= "Closed"></Div> -                                                                     <Divclass= "Media1"> -                                                                         <ahref="#_"> -                                                                             <imgsrc= "http://file.ttyouni.com/image/ cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc324 8AA0A0C0F208BDE2F43C2284E2B28331912539C734556076D66B0BF "alt=""URL=""onmouseup= "Openimagesetdialog (this)"width= " the"></a> -                                                                     </Div> in                                                                 </Li> -                                                                 <Listyle= "position:relative; left:0px; top:0px;"class=""> to                                                                     <Divclass= "Closed"></Div> +                                                                     <Divclass= "Media1"> -                                                                         <ahref="#_"> the                                                                             <imgsrc= "/content/images/scene/gather204/banner.jpg"alt=""URL= "http://www.ttyouni.com/"onmouseup= "Openimagesetdialog (this)"width= " the"></a> *                                                                     </Div> $                                                                 </Li>Panax Notoginseng                                                                  -                                                                                                                         <Liclass= "Add"> the                                                                 <ahref= "javascript:;"> +                                                                     <imgsrc= "/content/images/scene/vote004/jia.jpg"onclick= "Openimagesetdialog (this,1)"width= " the"> A                                                                 </a> the                                                             </Li> +                                                         </ul>
HTML

Processing of JS

var Mousebuttonflag = false;//Controls whether to trigger click events//Drag $ (' #acAlbums '). Sort            Able ({items: "Li:not (. Add)", Start:function (event, UI) {Mousebuttonflag = true;            }, Stop:function (event, UI) {Mousebuttonflag = false;        }        });            Open the pop-up picture settings popup function Openimagesetdialog (obj,v) {if (Mousebuttonflag) {return; } if (v!=undefined) {//Add Picture Object $ ("#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 (); }

JS = Handle Click events coexist with drag events

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.