Zepto의 tap 메소드로 onClick 메소드를 변환하기

Question

Zepto를 사용하여 onclick의 모바일 웹 앱에 링크를 간단하게 다시 작성할 수 있습니까? 현재 onclick의 모든 인스턴스에 대해 $ .tap 명령을 실행하고 싶습니다. 예를

<a href="#" tap="doSomething(); return false;">Link</a> 

를 들어

이 가능, 또는 발사에서 온 클릭을 방지하지만, 온 클릭 방법을하고 $ .tap 방법 내에서 호출하는 방법은 무엇입니까?

Zepto를 사용하여 빠른 버튼을 만들기위한 제안 사항이 있습니까?

Answer 1

좋아요. 당신이 모바일과 데스크톱에서 다른 동작을 원하지만 동일한 코드를 사용하기를 바랍니다. 당신은 당신이에있는 플랫폼을 식별해야 다음이 경우 다음

if(MOBILE) { 
    $('element').click(function(){ 
     return false; 
    }); 

    $('element').on('touchstart', function(){ 
     // functionality of the onclick written here 
    }); 
} 
else { 
// desktop event listeners 
} 

Answer 2

더 우아한 방법 변수에 클릭 트리거를 저장하고 다음에서 해당 변수를 매핑하는 것 "클릭"을 "touchstart"코드 정의 당신이 터치 스크린 장치를 다룰 때. 다음 내 myUtils 변경을 감지 터치 스크린이 있다면

var myUtils = myUtils || {}; 
myUtils.events = myUtils.events || { 
    click : "click" 
}; 

: 여기

, 나는 그 값으로 "클릭"디폴트는 내 클릭 이벤트를 저장하는 전역 객체 변수, myUtils를 사용합니다. events.click 속성이 "touchstart"의 값을 가지고 : 내 요소에 내 클릭 이벤트를 바인딩있을 때, 이제

if (typeof document.body.ontouchstart !== "undefined") { 
    myUtils.events.click = "touchstart"; 
} 

을, 나는 이벤트의 이름을 내 myUtils.events.click 속성을 사용

$(function() { 
    $("#link").bind(myUtils.events.click, function(e) { 
    alert("I'm a " + e.type); 
    e.preventDefault(); 
    }); 
});​ 

이렇게하면 "터치 스크린입니까?" 응용 프로그램에서 한 번 테스트하고 필요한 후에 "터치 시작"또는 "클릭"에 바인딩합니다. 모바일 장치에서 원하지 않는 클릭 이벤트를 취소하는 것에 대해 걱정할 필요가 없습니다. 그 이벤트는 결코 처음부터 묶여 있지 않기 때문입니다.

e.preventDefault() 호출은 링크가 따르지 않도록합니다 (#link가 href 링크라고 가정).

JSFiddle 버전 : http://jsfiddle.net/BrownieBoy/Vsakw/

이 코드는 터치 스크린 장치가 만 터치 스크린 장치 있다고 가정주의 할; 즉 휴대 전화 또는 태블릿입니다. 터치 스크린 PC를 사용하고 있다면 마우스로 사용할 수 없습니다!