С помощью jQuery, как обнаружить/нажать на касание, но не щелкнуть?

Question

У меня есть подсказка, которая активирует (показывает), когда целевой текст зависнет. Для сенсорных устройств пользователь может щелкнуть целевой текст и отобразить всплывающую подсказку, а затем, когда он коснется TOOLTIP (не целевой текст), всплывающая подсказка скрывается. Но я хочу, чтобы человек с мышью мог выбрать текст в всплывающей подсказке, проблема в том, что когда они нажимают на всплывающую подсказку, он скрывается, что является функциональностью для сенсорных устройств.

Итак, для компьютеров (с помощью мыши) я хочу, чтобы всплывающую подсказку можно было щелкнуть, не скрывая ее, но на сенсорных устройствах я хочу, чтобы всплывающая подсказка спряталась, когда ее щелкнули, чтобы сделать ее проще для пользователя. Надеюсь, это имеет смысл.

Каков наилучший способ сделать это? Есть ли способ для меня сказать: «Когда это касается, сделайте это, но, щелкнув (с помощью мыши), сделайте это»?

http://jsfiddle.net/nicktheandroid/fdWW5/4/

Answer 1

Это, вероятно, избыточно, но вот некоторые расширения JQuery я использую, чтобы облегчить сенсорное событие во всех браузерах:

jQuery.fn.touchstart = function (callback) { 
this.each(function() { 
var _self = jQuery(this); 
var onTouchstart = function (ev) { 
    if (ev.originalEvent) { 
    if (ev.originalEvent.targetTouches) { 
     AddTouchPropertiesToJQEventObject(ev); 
     callback.call(this, ev); 
    } 
    } 
}; 
_self.bind('touchstart', onTouchstart); 
}); 
return this; 
}; 

jQuery.fn.touchmove = function (callback) { 
this.each(function() { 
var _self = jQuery(this); 
var onTouchMove = function (ev) { 
    if (ev.originalEvent) { 
    if (ev.originalEvent.targetTouches) { 
     AddTouchPropertiesToJQEventObject(ev); 
     callback.call(this, ev); 
    } 
    } 
}; 
_self.bind('touchmove', onTouchMove); 
}); 
return this; 
}; 

jQuery.fn.touchend = function (callback) { 
this.each(function() { 
var _self = jQuery(this); 
var onTouchEnd = function (ev) { 
    var lastTouchMoveInfo = _self.data('lastTouchMoveInfo'); 
    ev = $.extend(ev, lastTouchMoveInfo); 
    callback.call(this, ev); 
}; 
var onTouchMove = function (ev) { 
    var lastTouchMoveInfo = { 
    pageX: ev.pageX, 
    pageY: ev.pageY, 
    touches: ev.touches 
    }; 
    _self.data('lastTouchMoveInfo', lastTouchMoveInfo); 
}; 
_self.touchstart(onTouchMove); 
_self.touchmove(onTouchMove); 
_self.bind('touchend', onTouchEnd); 
}); 
return this; 
}; 

var AddTouchPropertiesToJQEventObject = function (jqEventObject) { 
    jqEventObject.pageX = jqEventObject.originalEvent.targetTouches[0].pageX; 
    jqEventObject.pageY = jqEventObject.originalEvent.targetTouches[0].pageY; 
    jqEventObject.rotation = jqEventObject.originalEvent.rotation; 
    jqEventObject.scale = jqEventObject.originalEvent.scale; 
    jqEventObject.targetTouches = jqEventObject.originalEvent.targetTouches; 
    jqEventObject.touches = jqEventObject.originalEvent.touches; 
}; 

В основном вы хотите привязать к touchstart, touchmove и touchend. Или, может быть, просто touchstart за то, что вы делаете.