iScroll_javascript 기술에서 두 번 트리거되는 이벤트 클릭에 대한 솔루션-JS 튜토리얼-php.cn

iScroll_javascript 기술에서 두 번 트리거되는 이벤트 클릭에 대한 솔루션

WBOY

풀어 주다： 2016-05-16 16:10:25

원래의

1562명이 탐색했습니다.

저는 이전에 이 문제를 논의한 친구들의 기사를 많이 읽었습니다. 예를 들어 변수를 사용하여 실행 간격 등을 기록합니다. 매번 자위를 해야 하는 것 같아서 꽤 피곤해요. 나는 벽돌을 옮기기 전에 도구를 선택하는 것을 좋아합니다. 사실 이 문제의 해결 방법은 매우 간단합니다. iScroll은 실제로 브라우저를 클릭할 때 touchstart 및 touchend 이벤트를 가로챕니다. end를 터치할 때 요소의 onclick 이벤트(_end 함수)를 트리거하려면 js를 사용하세요. 실제 동작에서는 touchend가 먼저 실행된 후 onclick 관련 기능이 실행됩니다. 이로 인해 한 번의 클릭과 두 개의 트리거로 인해 골치 아픈 일이 발생합니다. 이것은 애초에 문제가 되지 않습니다. 이것이 문제가 되는 이유는 iScroll의 소스코드를 살펴봐야 하기 때문입니다. 이 문제를 해결하는 방법은 두 번째 기능 실행을 거부하는 것입니다. 그리고 내 논리는 똑같습니다. _end 함수에서 클릭 이벤트를 트리거하는 코드를 실행한 후 onclick 이벤트에 바인딩된 함수를 제거할 수 있습니다. 그런 다음 수백 밀리초의 타이밍 후에 이벤트를 다시 추가하십시오. 예:

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

//처리 전

더블클릭 테스트

//처리 후 

더블클릭 테스트

onclick 관련 기능을 제거한 후에는 자연스럽게 두 번째 테스트 기능이 실행되지 않습니다. 다음에 계속 사용하려면 setTimeout을 사용하여 onclick 콘텐츠를 복원할 수 있습니다.

수정된 iscroll 소스 코드(_end 함수 내 약 550~570줄):

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

that.doubleTapTimer = setTimeout(function () {
                            that.doubleTapTimer = null;
                            // 마지막으로 터치된 요소를 찾습니다
                            대상 = point.target;
                            while (target.nodeType != 1) 대상 = target.parentNode;
                            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
                                ev = doc.createEvent('MouseEvents');
                                ev.initMouseEvent('click', true, true, e.view, 1,
                                    point.screenX, point.screenY, point.clientX, point.clientY,
                                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                                    0, null);
                                ev._fake = true;
                                target.dispatchEvent(ev);
                                /**다음 코드는 새로운 코드입니다**/
                                //找到绑결정click事件적원素。
                                var obj = $(target).attr("onclick") != null ? $(대상) : $(대상).parents("[onclick]")[0];
                                if (obj != null) {
                                    var clickContent = $(obj).attr("onclick");
                                    if (clickContent != "void(0)") {
                                        //사용할 수 있는 새로운 기능을 클릭하세요
                                        $(obj).attr("data-clickbak", $(obj).attr("onclick"));
//onclick 속성 값을 변경합니다.
$(obj).attr("onclick", "void(0)");
//과격한 클릭 방지
If (that.hashBox.length>0) {
for (var _i = 0; _i < that.hashBox.length; _i )
~ ~ That.hashBox.splice(_i, 1);
휴식;
~ ~ ~ That.hashBox.push($(obj));
That._clickBack();
~ ~                } ~ | //끝
| ~ ~

_clickBack 함수 및 hashBox 코드 조각(_end 함수 앞에 추가됨)

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

        hashBox: [],

/*클릭한 객체의 이벤트 복원*/

​​​​​ _clickBack: 함수 () {

            var that = this;

              setTimeout(function () {

If (that.hashBox.length > 0) {

                    var obj = that.hashBox.pop();

>
If (that.hashBox.length > 0) that._clickBack();

                }

             }, 500);

}

물론 iscroll 소스 코드를 수정하지 않고 공개 함수를 통해서도 구현할 수 있습니다.

이상 내용이 이 글의 전부입니다. iscroll 슬라이딩 컨트롤 사용법을 배우는 모든 분들에게 도움이 되기를 바랍니다.