Çeşitli cihazlarda çalışması gereken bir mobil web sitesinde çalışıyorum. Şu an bana başım ağrıyor BlackBerry.

Hem klavye tıklamalarını hem de dokunma etkinliklerini desteklememiz gerekir.

İdeal olarak sadece şunu kullanırdım:

$thing.click(function(){...})

ancak karşılaştığımız sorun, bu böğürtlen cihazlarının bazılarının dokunma anından tıklamayı tetikleyen çok can sıkıcı bir gecikmeye sahip olmasıdır.

Çözüm bunun yerine touchstart kullanmaktır:

$thing.bind('touchstart', function(event){...})

Ama her iki olayı da bağlarım, ama sadece bir olayı nasıl tetiklerim? Klavye aygıtları için yine de tıklama etkinliğine ihtiyacım var, ancak elbette, bir dokunmatik cihaz kullanıyorsanız tıklama etkinliğinin tetiklenmesini istemiyorum.

Bonus bir soru: Bunu yapmak ve ayrıca bir touchstart etkinliği bile olmayan tarayıcıları barındırmak için yine de var mı? Bunu araştırırken, BlackBerry OS5 dokunmatik başlatmayı desteklemiyor gibi görünüyor, bu nedenle o tarayıcı için tıklama etkinliklerine de güvenmeniz gerekecek.

EK:

Belki daha kapsamlı bir soru:

JQuery ile aynı temaslarla hem dokunmatik etkileşimleri hem de fare etkileşimlerini ele almak mümkün mü / tavsiye ediliyor mu?

İdeal olarak, cevap evettir. Değilse, bazı seçeneklerim var:

1) Cihaz bilgisini almak için WURFL kullanıyoruz, böylece kendi cihaz matrisimizi oluşturabiliriz. Cihaza bağlı olarak, touchstart VEYA click'i kullanacağız.

2) JS üzerinden tarayıcıda dokunmatik destek için algılama (Bu konuda biraz daha araştırma yapmam gerekiyor, ancak bu yapılabilir gibi görünüyor).

Ancak, bu hala bir sorun bırakıyor: Peki BOTH'u destekleyen cihazlar. Desteklediğimiz telefonlar (yani Nokianın ve BlackBerries) Bazı dokunmatik ekranlar her ikisine de sahip ve klavyeler. Yani bu tür bir soru beni tam anlamıyla orijinal soruya geri götürüyor ... Her ikisine de aynı anda izin vermenin bir yolu var mı?

Güncelleme : Mouse ve touch arasında seçim yapmak yerine "pointer" olaylarına bağlanmanıza izin veren jQuery Pointer Events Polyfill projesine göz atın .

Her ikisine de bağlanın, ancak fonksiyon her 100 ms'de bir kez ateşlenecek şekilde bir bayrak yapın.

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

Bu "oluşturduğum" düzeltmedir ve GhostClick'i çıkarır ve FastClick'i uygular. Kendi başınıza deneyin ve sizin için işe yarayıp yaramadığını bize bildirin.

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

Böyle bir şey deneyebilirsiniz:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

Genellikle bu da işe yarar:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

Sadece olay işlevinin return false;sonuna eklemek on("click touchstart")bu sorunu çözebilir.

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

.On () üzerindeki jQuery dokümanlarından

falseBir olay işleyicisinden döndüğünüzde otomatik olarak event.stopPropagation()ve öğelerini arar event.preventDefault(). falseKısayol olarak işleyici için de bir değer iletilebilir function(){ return false; }.

Benzer bir şey yapmak zorundaydım. İşte benim için çalışanların basitleştirilmiş bir versiyonu. Bir dokunma olayı algılanırsa, tıklama bağlamasını kaldırın.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

Benim durumumda click olayı bir <a>öğeye bağlıydı, bu nedenle tıklama bağlayıcısını kaldırmak ve <a>öğenin varsayılan eylemini engelleyen bir click olayını yeniden bağlamak zorunda kaldım .

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

Aşağıdaki şekilde başardım.

Tereyağından kıl çeker gibi...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

En iyi uygulamanın şimdi kullanmak olduğuna inanıyorum:

$('#object').on('touchend mouseup', function () { });

touchEnd

Dokunmatik yüzey olaydan bir temas noktası kaldırıldığında, dokunma olayı tetiklenir.

TouchEnd olay olacak değil herhangi bir fare olayları tetikleyebilir.

---

mouseup

Fare işaretçisi öğenin üzerindeyken fare düğmesi olayı bir öğeye gönderilir ve fare düğmesi serbest bırakılır. Herhangi bir HTML öğesi bu etkinliği alabilir.

Mouseup olay olacak değil herhangi dokunmatik olayları tetikleyebilir.

MİSAL

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

DÜZENLE (2017)

2017 itibariyle, Chrome ile başlayan ve .on("click")tıklama isteklerinde dokunma etkinliklerinin oluşturduğu gecikmeyi ortadan kaldırarak tıklama etkinliğini hem fare hem de dokunma için daha uyumlu hale getirmeye yönelik adımlar atıyor .

Bu, yalnızca click olayını kullanmaya geri dönmenin ileriye giden en basit çözüm olacağı sonucuna götürür.

Bunun pratik olup olmadığını görmek için henüz çapraz tarayıcı testi yapmadım.

Genellikle varsayılan dokunma ve dokunma (tıklama) api'lerini karıştırmak istemezsiniz. Dokunma dünyasına girdikten sonra sadece dokunmayla ilgili işlevlerle başa çıkmak daha kolaydır. Aşağıda, istediğinizi yapacak bazı sahte kodlar verilmiştir.

Touchmove olayına bağlanır ve konumları izlerseniz, hareketleri ve neyin olmadığını tespit etmek için doTouchLogic işlevine daha fazla öğe ekleyebilirsiniz.

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

google https://developers.google.com/mobile/articles/fast_buttons adresinden hızlı düğmeleri ve tercihli tıklamaları kontrol edin

Şey ... Bunların hepsi çok karmaşık.

Modernizriniz varsa, bu beyinsizdir.

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

Daha iyi bakım için başka bir uygulama. Ancak, bu teknik event.stopPropagation () işlevini de gerçekleştirir. Tıklama 100 ms boyunca tıklanan başka bir öğeye takılmaz.

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

Sadece dokümantasyon amaçlı olarak, masaüstünde / mobil çözümde düşünebileceğim en hızlı / en duyarlı tıklama için yaptığım şey:

Ben jQuery'nin yerini ontarayıcı destekleri olayları dokunmatik zaman, touchstart ile tüm tıklama olayları yerini, modifiye biriyle fonksiyonunu.

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

Kullanım, eskisi gibi tam olarak aynı olurdu:

$('#my-button').on('click', function(){ /* ... */ });

Ancak, kullanılabilir olduğunda dokunmatik başlangıç ​​kullanır, olmadığında tıklayın. Herhangi bir gecikmeye gerek yoktur: D

Az ontouchstartönce tetiklenip tetiklenmediğini ezberleme fikri buldum . Bu durumda, onu destekleyen ve onclicketkinliği yok saymak isteyen bir cihazdayız. Yana ontouchstarthep tetiklenen edilmelidir önce onclick , bu kullanıyorum:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Böyle deneyebilirsiniz:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

Benim durumumda bu mükemmel çalıştı:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

Asıl sorun, bunun yerine fareyle tıklamayı denediğimde, dokunmatik cihazlarda tıklama ve touchend'i aynı anda tetikledi, tıklamayı kullanırsam, bazı işlevler mobil cihazlarda hiç çalışmadı. Tıklama ile ilgili sorun, touchend dahil etkinliğin geri kalanını tetikleyen küresel bir olaydır.

Bu benim için çalıştı, mobil her ikisini de dinliyor, bu yüzden dokunma olayı olanı önleyin. masaüstü sadece fare dinle.

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

Benim için Mottie tarafından verilen en iyi cevap olmak, sadece kodunu daha yeniden kullanılabilir yapmaya çalışıyorum, bu yüzden bu benim katkısı:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

Ben de bir Android / iPad web uygulaması üzerinde çalışıyorum ve sadece "touchmove" kullanarak bileşenleri taşımak için yeterli görünüyor (touchstart gerek yok). Touchstart'ı devre dışı bırakarak .click (); jQuery'den. Aslında işe yarıyor çünkü touchstart tarafından aşırı yüklenmedi.

Son olarak, binb .live ("touchstart", function (e) {e.stopPropagation ();}); touchstart olayından ilerlemeyi durdurmasını, oturma odasının tetiklenmesi için () tıklamasını istemek.

Benim için çalıştı.

Bu sorunu çözmeye çalışırken göz önünde bulundurulması gereken çok şey var. Çoğu çözüm kaydırmayı keser veya hayalet tıklama olaylarını düzgün işlemez.

Tam bir çözüm için bkz. Https://developers.google.com/mobile/articles/fast_buttons

Not: Hayalet tıklama olaylarını her öğe için ayrı ayrı işleyemezsiniz. Gecikmeli bir tıklama ekran konumuna göre tetiklenir, bu nedenle dokunma etkinlikleriniz sayfayı bir şekilde değiştirirse, tıklama etkinliği sayfanın yeni sürümüne gönderilir.

Olaylara atamak 'touchstart mousedown'veya 'touchend mouseup'kullanımın istenmeyen yan etkilerinden kaçınmak etkili olabilir click.

Bir tıklamanın her zaman bir dokunma olayını takip edeceği gerçeğinden yararlanarak, zaman aşımlarını veya global bayrakları kullanmak zorunda kalmadan "hayalet tıklama" dan kurtulmak için yaptığım şey budur.

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

Temel olarak ontouchstart, bir öğe öğeye her tetiklendiğinde, bir küme işaretlenir ve ardından tıklama geldiğinde kaldırılır (ve yoksayılır).

Neden jQuery Olay API'sını kullanmıyorsunuz?

http://learn.jquery.com/events/event-extensions/

Bu basit olayı başarıyla kullandım. Temiz, isimlendirilebilir ve geliştirilebilecek kadar esnek.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

JQuery kullanıyorsanız aşağıdakiler benim için oldukça iyi çalıştı:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

Diğer çözümler de iyidir, ancak bir döngüde birden çok olayı bağlıyordum ve uygun bir kapatma oluşturmak için kendi kendine arama işlevine ihtiyaç duydum. Ayrıca, bir sonraki tıklama / dokunma başlangıcında çağrılabilmesini istediğim için bağlayıcıyı devre dışı bırakmak istemedim.

Benzer durumdaki birine yardım edebilir!

Basit özellikler için dokunmayı tanımanız veya aşağıdaki kodu kullanmam'ı tıklamanız yeterlidir:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

Bu, touchstart olayı tanımlanmışsa "dokunma" ve değilse "dokunma" döndürür. Dediğim gibi bu tıklama / musluk olayları için basit bir yaklaşım.

Bunu deniyorum ve şimdiye kadar çalışıyor (ama ben sadece Android / Phonegap öylesine uyarı emptor)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

Her dokunuşta işleyicileri yeniden bağladığımdan hoşlanmıyorum, ancak dokunuşlar olarak kabul edilen her şey çok sık gerçekleşmiyor (bilgisayar zamanında!)

Ben '# tuş takımı' için bir işleyicileri bir TON var, bu yüzden çok fazla kod olmadan sorunla başa çıkmanızı sağlayan basit bir işlevi olması neden bu şekilde gitti.

Kullanmayı deneyin Virtual Mouse (vmouse) Bindingsdan jQuery Mobile. Özellikle davanız için sanal bir etkinlik:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

Tarayıcı destek listesi: http://jquerymobile.com/browser-support/1.4/

EDIT: Benim eski cevap (bu konudaki cevaplara dayalı) benim için gitmek için bir yol değildi. Bir alt menünün mouse enter veya touch click üzerine genişlemesini ve mouse izni veya başka bir touch click'i daraltmasını istedim. Fare olayları normalde dokunma olaylarından sonra tetiklendiğinden, hem dokunmatik ekranı hem de fare girişini aynı anda destekleyen olay dinleyicileri yazmak biraz zordu.

jQuery eklentisi: Dokunmatik Veya Fare

" Touch Or Mouse " adlı bir jQuery eklentisi yazdım (897 bayt küçültüldü) ve bir olayın dokunmatik ekran veya fare tarafından çağrılıp çağrılmadığını algılayabilir (dokunmatik desteği test etmeden!). Bu, hem dokunmatik ekranın hem de farenin aynı anda desteklenmesini sağlar ve olaylarını tamamen ayırır.

OP kullanabilirsiniz Bu şekilde touchstartya da touchendhızlı tıklama dokunmak yanıt vermek için ve clicktıklamalar için çağrılan tek bir fare tarafından.

gösteri

Birincisi yani. gövde öğesi dokunma olaylarını izleme:

$(document.body).touchOrMouse('init');

Fare, öğelere bağlılığımızı varsayılan şekilde arar ve arayarak $body.touchOrMouse('get', e)olayın bir dokunmatik ekran veya fare tarafından çağrılıp çağrılmadığını öğrenebiliriz.

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

Eklentiyi http://jsfiddle.net/lmeurs/uo4069nh adresindeki iş yerinde görün. .

açıklama

1. Bu eklentinin ie çağrılması gerekir. gövde elemanının izlenmesi touchstartve touchendolaylar, bu şekilde touchendolayın tetikleyici eleman üzerinde (yani bir bağlantı veya düğme) tetiklenmesi gerekmez. Bu iki dokunma olayı arasında bu eklenti, herhangi bir fare olayının dokunarak çağrıldığını düşünür.
2. Fare olayları ancak sonrasında touchendbaşlatılır, sonra bir fare olayı ghostEventDelay(varsayılan olarak 1000 ms) içinde tetiklenirken touchend, bu eklenti fare olayının dokunarak çağrıldığını düşünür.
3. Dokunmatik ekran kullanarak bir öğeye tıklandığında, öğe :activedurumu kazanır . mouseleaveEleman yani bu durumu kaybeder sonra olay sadece ateşlenir. başka bir öğeye tıklamak. Bu, mouseenteretkinlik tetiklendikten sonraki saniye (veya dakika!) Olabileceğinden, bu eklenti bir öğenin son mouseenteretkinliğini izler : son mouseenteretkinlik dokunarak çağrıldıysa, aşağıdaki mouseleaveolayın da dokunarak çağrıldığı kabul edilir.

İşte bunu yapmanın basit bir yolu:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

Temel olarak, jQuery'nin kök belgeye bağlı veri nesnesindeki 'trigger' özelliğine tetiklenen ilk olay türünü kaydedersiniz ve yalnızca olay türü 'tetikleyici' değerine eşit olduğunda yürütülür. Dokunmatik cihazlarda, etkinlik zinciri muhtemelen 'touchstart' ve ardından 'click' olur; ancak, "tıklama" işleyicisi yürütülmeyecektir çünkü "tıklama", "tetikleyici" ("dokunmatik başlangıç") içinde kaydedilen ilk etkinlik türüyle eşleşmez.

Varsayım, ve bunun güvenli olduğuna inanıyorum, akıllı telefonunuzun bir dokunmatik cihazdan bir fare cihazına kendiliğinden değişmeyeceği veya 'tetikleme' olay türü yalnızca sayfa yükleme ve "tıklama" ifadesi hiçbir zaman "dokunma başlat" ile eşleşmez.

İşte oynayabileceğiniz bir kod penceresi (bir dokunmatik cihazdaki düğmeye dokunmayı deneyin - tıklama gecikmesi olmamalıdır): http://codepen.io/thdoan/pen/xVVrOZ

Ben de bir seçici dize geçirerek jQuery's torunları filtreleme destekleyen basit bir jQuery eklentisi olarak bu uyguladı:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Kod açıklayıcı: http://codepen.io/thdoan/pen/GZrBdo/

Bulduğum en iyi yöntem, touch olayını yazmak ve bu olayın programlı normal click olayını çağırmasını sağlamaktır. Bu şekilde tüm normal tıklama etkinlikleriniz olur ve ardından tüm dokunma etkinlikleri için yalnızca bir etkinlik işleyici eklemeniz gerekir. Dokunmatik yapmak istediğiniz her düğüm için, dokunmatik işleyiciyi çağırmak için "dokunmatik" sınıfını eklemeniz yeterlidir. Jquery ile gerçek bir dokunuş olayı ve yanlış pozitif değil emin olmak için bazı mantık ile böyle çalışır.

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});