>  기사  >  웹 프론트엔드  >  jQuery는 여러 제출에서 클릭 더블클릭을 방지하고 동적 함수 또는 여러 매개변수를 전달합니다_jquery

jQuery는 여러 제출에서 클릭 더블클릭을 방지하고 동적 함수 또는 여러 매개변수를 전달합니다_jquery

WBOY
WBOY원래의
2016-05-16 16:53:411085검색

오늘 나는 여러 제출을 방지하는 JQ의 두 번 클릭 이벤트 문제에 대해 글을 쓰고 있습니다. 이는 함수를 통해 일괄적으로 정의할 수 있으므로 메서드를 통해 요소의 이벤트를 더욱 다양하고 동적으로 바인딩할 수 있습니다. 그리고 함수 이름이나 여러 매개변수를 동적으로 전달할 수 있습니다(이 예에서는 함수 이름만 전달하고 Eval을 통해 호출합니다).

우리 모두는 jQuery의 이벤트 바인딩에서 두 번 클릭 이벤트(dblclick)가 실행될 때 두 개의 클릭 이벤트(click)가 트리거될 수 있다는 것을 알고 있습니다. 즉, div 등의 label 요소가 클릭 이벤트(click)와 더블클릭 이벤트(dblclick)에 모두 바인딩된 경우, 클릭 이벤트(click)가 실행되면 더블 클릭 이벤트(dblclick)는 트리거되지 않으며, 더블 클릭 이벤트(dblclick)는 두 개의 클릭 이벤트(클릭)를 트리거합니다.

먼저 클릭 이벤트의 실행 순서를 살펴보세요.

클릭(click): mousedown, mouseout, click
더블 클릭(dblclick): mousedown, mouseout, click, mousedown , mouseout , click, dblclick;

더블 클릭 이벤트(dblclick)에서는 두 개의 클릭 이벤트(클릭) 중 첫 번째 클릭 이벤트(클릭)는 차단되지만 두 번째 클릭 이벤트는 차단되지 않습니다. 회의. 즉, 더블 클릭 이벤트(dblclick)는 클릭 이벤트(click)의 결과와 더블 클릭 이벤트(dblclick)의 결과를 반환합니다. 두 번 클릭 이벤트(dblclick)의 결과와 두 번의 클릭 이벤트(click)의 결과 대신.

이런 경우에는 추가 클릭 이벤트(클릭)만 없애주시면 문제가 해결됩니다.

효과는 다음과 같습니다.
http://images.cnitblog.com/i/554071/201404/010846579687197.png
소스코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.





jQuery 클릭 더블클릭이 여러 번 실행되고 전달되는 것을 방지합니다. 동적 함수 메서드



테스트 결과 표시:

나를 클릭하세요< /div>


<스크립트 언어= "javascript">

function std (obj,vs){
var TimeFn = null
var funs=$(obj).attr("onclick"); obj).click(function() {
clearTimeout(TimeFn);
TimeFn = setTimeout(function(){
eval(funs);
clearTimeout(TimeFn);
}, 400 );
});

$(obj).dblclick(function() {
clearTimeout(TimeFn);
}); onclick");
}

var ss1=function(s){$("#show").html("DIV는 테스트 결과를 표시합니다:" s);alert("a");} ;//div
var ss2=function(s){$("#show").html("INPUT은 테스트 결과를 표시합니다:" s);alert("b");};//메서드에 의해 호출되는 메서드 input

에 의해 호출됨 //메소드를 통한 요소 이벤트의 동적 바인딩
std("#div","div")
std("#but1","button1"); >

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.