У мене є кілька веб-сайтів, які я створив раніше, на яких використовуються події миші jquery ... У мене просто з'явився ipad, і я помітив, що всі події миші переводяться в кліки ... так, наприклад, я повинен зробити два кліки замість одного .. (перший вказівник миші, ніж фактичний клік)

Чи готове вирішити це рішення? можливо команда jquery, яку я повинен використовувати замість миші / виходу тощо .. дякую!

Це ще не перевірено повністю, але оскільки в iOS пожежі торкаються подій, це може спрацювати, якщо припустити, що ви перебуваєте в налаштуваннях jQuery.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

Ідея полягає в тому, що Mobile WebKit запускає touchendподію наприкінці крана, тому ми слухаємо це, а потім перенаправляємо браузер, як тільки touchendподія запускається за посиланням.

Не зовсім зрозуміло, у чому ваше питання, але якщо ви просто хочете усунути подвійне клацання, зберігаючи ефект наведення миші, моя порада:

• Додайте ефекти наведення курсора на touchstartта mouseenter.
• Видалити ширяння вплив на mouseleave, touchmoveі click.

Фон

Щоб імітувати мишу, веб-переглядачі, такі як Webkit mobile, запускають наступні події, якщо користувач торкається і відпускає палець на сенсорний екран (наприклад, iPad) (джерело: Touch and Mouse на html5rocks.com):

1. touchstart
2. touchmove
3. touchend
4. 300 мс затримки, коли браузер переконується, що це один дотик, а не подвійний
5. mouseover
6. mouseenter
   • Примітка : Якщо mouseover, mouseenterабо mousemoveподія змінює зміст сторінки, такі події ніколи не звільняють.
7. mousemove
8. mousedown
9. mouseup
10. click

Не видається можливим просто сказати веб-браузеру пропустити події миші.

Що ще гірше, якщо подія перемикання змінює вміст сторінки, подія натискання ніколи не запускається, як це пояснено в посібнику веб-вмісту Safari - Поводження з подіями , зокрема на рисунку 6.4 в Подіях одним пальцем . Що саме означає "зміна вмісту", залежатиме від браузера та версії. Я виявив, що для iOS 7.0 зміна кольору фону не є (або вже не?) Зміною вмісту.

Роз'яснення рішення

Для резюме:

• Додайте ефекти наведення курсора на touchstartта mouseenter.
• Видалити Hover вплив на mouseleave, touchmoveіclick.

Зауважте, що жодних дій щодо touchend !

Це явно працює для подій миші: mouseenterі mouseleave(трохи покращені версіїmouseover таmouseout ) запускаються, додавання та видалення наведення курсора.

Якщо користувач насправді click посилання, ефект наведення курсора також видаляється. Це забезпечить його видалення, якщо користувач натисне кнопку назад у веб-браузері.

Це також працює для сенсорних подій: touchstartдодається ефект наведення. Це "" не "" видалено на touchend. Він додається знову mouseenter, і оскільки це не спричиняє змін вмісту (воно вже було додано), clickподія також запускається, а посилання виконується без потреби користувача знову натискати!

Затримка на 300 мс, яку браузер має між touchstartподією, і clickнасправді використовує, оскільки ефект наведення покажеться протягом цього короткого часу.

Якщо користувач вирішить скасувати натискання, переміщення пальця зробить це так само, як звичайно. Як правило, це проблема, оскільки жодна mouseleaveподія не проводиться, а ефект наведення курсора залишається в силі. На щастя, це можна легко виправити, видаливши ефект наведення touchmove.

Це воно!

Зауважте, що можна видалити затримку 300 мс, наприклад, використовуючи бібліотеку FastClick , але це не вдається для цього питання.

Альтернативні рішення

Я знайшов такі проблеми із наступними альтернативами:

• Виявлення браузера: надзвичайно схильний до помилок. Передбачається, що пристрій має миша або сенсор, тоді як комбінація обох стане все більш поширеною, коли сенсорні дисплеї збільшуються.
• Виявлення медіа CSS: Єдине відоме лише для CSS рішення Він все ще схильний до помилок і все ж передбачає, що пристрій має або мишу, або сенсорне, хоча обидва можливі.
• Емуляція події клацання в touchend: Це буде неправильно переходити за посиланням, навіть якщо користувач хотів лише прокручувати або масштабувати, не маючи наміру фактично клацати посилання.
• Використовуйте змінну для придушення подій миші. Цей параметр встановлює змінну, touchendяка використовується як умова if у наступних подіях миші, щоб запобігти змінам стану в цей момент часу. Змінна скидається в події клацання. Це гідне рішення, якщо ви дійсно не хочете ефекту наведення на сенсорні інтерфейси. На жаль, це не працює, якщо a запускається touchendз іншої причини і не запускається подія клацання (наприклад, користувач прокручує або збільшує масштаб), а згодом намагається перейти за посиланням мишею (тобто на пристрої з інтерфейсом миші та сенсорного інтерфейсу ).

Подальше читання

• http://jsfiddle.net/macfreek/24Z5M/ . Перевірте вищевказане рішення для себе в цій пісочниці.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . Ця сама відповідь з трохи більше досвіду.
• http://www.html5rocks.com/en/mobile/touchandmouse/ . Чудова довідкова стаття на html5rocks.com про дотик та мишу загалом.
• https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Посібник веб-вмісту Safari - Обробка подій. Дивіться, зокрема, рисунок 6.4, де пояснюється, що після зміни вмісту під час mouseoverабо mousemoveподії не запускаються подальші події .

Дивіться також проблему подвійного клацання iPad / iPhone та відключення ефектів наведення вказівника на мобільних браузерах .

Здається, все-таки є рішення CSS. Причина, що Safari чекає другого дотику, полягає в тому, що фонове зображення (або елементи), які ви зазвичай призначаєте для події: наведіть курсор. Якщо нічого не буде показано - у вас не виникне жодних проблем. Рішення полягає в орієнтації на платформу iOS із вторинним файлом CSS (або стилем у випадку підходу JS), який переосмислює: наведіть на приклад фон, щоб наслідувати, наприклад, і зберегти приховані елементи, які ви збиралися відображати мишею:

Ось приклад CSS та HTML - блок продуктів із міткою зірочкою на миші:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS:

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

Рішення (вторинний CSS):

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

Не потрібно робити надскладних.

$('a').on('touchend', function() {
    $(this).click();
});

Що для мене спрацювало - це те, що вже тут говорили інші:

Не показувати / приховувати елементи на наведення курсора чи миші (що в моєму випадку є подією).

Ось що говорить Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):

Елемент, на якому можна натиснути, - це посилання, елемент форми, область карти зображення або будь-який інший елемент з переміщенням миші, мусудаун, мишею або обробниками onclick

Якщо користувач натискає елемент, який можна натиснути, події надходять у такому порядку: перехід миші, переміщення миші, мусоун, миша та клацання. Крім того, якщо вміст сторінки змінюється на події переміщення миші, наступні події в послідовності не надсилаються. Така поведінка дозволяє користувачеві використовувати новий вміст.

Отже, ви можете використовувати рішення @ woop: виявіть userAgent, перевірте, чи це пристрій iOS, а потім прив’яжіть подію. Я в кінцевому підсумку скористався цією методикою, оскільки вона відповідає моїм потребам і має сенс не пов'язувати події, коли ви цього не хочете.

Але ... якщо ви не хочете возитися з userAgents і все ще ховати / показувати елементи на курсорі миші / миші, я дізнався, що ви можете це зробити, використовуючи нативний javascript:

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

Це буде працювати на версії для робочого столу, і нічого не зробить на мобільній версії.

І для трохи більшої сумісності ...

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});

Рішення cduruk було досить ефективним, але викликало проблеми на кількох частинах мого сайту. Оскільки я вже використовував jQuery для додавання клавіші наведення CSS, найпростішим рішенням було просто не додавати клас наведення CSS на мобільних пристроях (а точніше - ТОЛЬКО додавати його, коли НЕ на мобільному пристрої).

Тут виникла загальна ідея:

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

* код зменшений для ілюстративних цілей

Я думаю, було б розумно спробувати mouseenterзамість mouseover. Це те, що використовується внутрішньо при прив’язці до .hover(fn,fn)і, як правило, те, що ви хочете.

У мене були такі проблеми з існуючими рішеннями, і я знайшов щось, що, здається, вирішує їх усі. Це передбачає, що ви націлені на те, щоб щось перехресно переглядали, перехрещували пристрій і не хочете нюхати пристрій.

Проблеми, які це вирішує

Використовуючи просто touchstartабо touchend:

• Викликає подію, коли люди намагаються прокрутити повз вміст, і просто трапилось провести пальцем по цьому елементу, коли вони починають розгортатись - запускаючи дію несподівано.
• Може призвести до того, що подія загориться на longpress , подібно до клацання правою кнопкою на робочому столі. Наприклад, якщо ваша подія клацання переходить до URL X, а користувач довго натискає, щоб відкрити X на новій вкладці, користувач буде плутати, щоб знайти X відкритим на обох вкладках. У деяких браузерах (наприклад, iPhone) це може навіть запобігти появі меню тривалого натискання.

Спрацьовування mouseoverподії на touchstartі mouseoutна touchmoveмає менш серйозні наслідки, але заважають звичайній поведінці браузера, наприклад:

• Тривале натискання викликає перемикання, яке ніколи не закінчується.
• Багато браузерів Android трактують розташування пальця touchstartяк "a" mouseover, що mouseoutредагується наступним чином touchstart. Один із способів перегляду вмісту миші в Android - тому торкатися області, що цікавить, і махнути пальцем, трохи прокручуючи сторінку. Поводжусь, touchmoveяк mouseoutце порушує.

Рішення

Теоретично ви можете просто додати прапор за допомогою touchmove, але iPhones викликає сенсорний рух, навіть якщо руху немає. Теоретично можна просто порівняти touchstartіtouchend подія pageXі , pageY але на айфонів, немає touchend pageXабоpageY .

Тож, на жаль, покрити всі основи все-таки стає трохи складніше.

$el.on('touchstart', function(e){
    $el.data('tstartE', e);
    if(event.originalEvent.targetTouches){
        // store values, not reference, since touch obj will change
        var touch = e.originalEvent.targetTouches[0];
        $el.data('tstartT',{ clientX: touch.clientX, clientY: touch.clientY } );
    }
});
$el.on('touchmove', function(e){
    if(event.originalEvent.targetTouches){
        $el.data('tstartM', event.originalEvent.targetTouches[0]);
    }
});

$el.on('click touchend', function(e){
    var oldE = $el.data('tstartE');
    if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
        $el.data('tstartE',false);
        return;
    }
    if( $el.data('iosTouchM') && $el.data('tstartT') ){
        var start = $el.data('tstartT'), end = $el.data('tstartM');
        if( start.clientX != end.clientX || start.clientY != end.clientY ){
            $el.data('tstartT', false);
            $el.data('tstartM', false);
            $el.data('tstartE',false);
            return;
        }
    }
    $el.data('tstartE',false);

Теоретично, є способи отримати точний час, що використовується для longpress, а не просто використовувати 1000 як наближення, але на практиці це не так просто і найкраще використовувати розумний проксі .

Відповідь MacFreak мені дуже допомогла. Ось декілька практичних кодів на випадок, якщо він вам допоможе.

ПРОБЛЕМА - застосування дотику означає, що кожен раз, коли ви прокручуєте палець по елементу, він відповідає так, ніби ви натиснули на нього, навіть якщо ви просто намагалися прокрутити повз.

Я створюю ефект за допомогою jQuery, який зникає в рядку під деякими кнопками, щоб "виділити" зависну кнопку. Я не хочу, щоб це означало, що вам потрібно двічі натискати кнопку на сенсорних пристроях, щоб перейти за посиланням.

Ось кнопки:

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

Я хочу, щоб дів "menu_underline" зів'яв при переході миші та зникав при миші. Але я хочу, щоб сенсорні пристрої могли переходити за посиланням одним клацанням, а не двома.

РІШЕННЯ - Ось jQuery, щоб він працював:

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$('.menu_button').bind('mouseleave touchmove click', function(){
    $(this).find(".menu_underline").fadeOut();
});

Велике спасибі за вашу допомогу в цьому MacFreak.

Щойно я дізнався, що це працює, якщо ви додасте порожній слухач, не запитуйте мене, чому я протестував його на iPhone та iPad з iOS 9.3.2, і він працював чудово.

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName('a');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener('touchend',function(){});
    }
}

Я "думаю", що у ваших посиланнях немає події onmouseover, де 1 натискання активує onmouseover, а подвійний торкнення активує посилання. але ідк. У мене немає iPad. Я думаю, що вам потрібно використовувати події жесту / дотику.

https://developer.apple.com/documentation/webkitjs

У мене була така ж проблема, але не на сенсорному пристрої. Подія запускається щоразу, коли ви клацаєте. Щось із черги подій чи так.

Однак моє рішення було таким: під час події клацання (чи торкання?) Ви встановлюєте таймер. Якщо посилання буде натиснуто ще раз протягом X мс, ви просто повернете помилкове.

Щоб встановити таймер елемента, ви можете використовувати $.data().

Це також може виправити описану вище проблему @Ferdy.

Якщо ви використовуєте Modernizr, користуватися Modernizr.touch дуже просто, як згадувалося раніше.

Однак я вважаю за краще використовувати комбінацію Modernizr.touch та тестування агентів користувачів, аби бути безпечною.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

Якщо ви не використовуєте Modernizr, ви можете просто замінити Modernizr.touchфункцію вище('ontouchstart' in document.documentElement)

Також зауважте, що тестування агента користувача iemobile дасть вам ширший спектр виявлених мобільних пристроїв Microsoft, ніж Windows Phone.

Можна використовувати click touchend ,

приклад:

$('a').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Наведений вище приклад стосується всіх посилань на сенсорних пристроях.

Якщо ви хочете орієнтуватися лише на конкретні посилання, ви можете зробити це, встановивши на них клас, тобто:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Ура,

Jeroen

Я зіткнувся з подібною ситуацією, коли у мене були події, прив’язані до стану миша / елемента миші / клацання, але на iPhone, користувачеві потрібно було двічі клацнути елемент, щоб спочатку запустити подію миші, а потім знову запустити подію клацання .

Я вирішив це за допомогою аналогічного способу, як описано вище, але я скористався плагіном jQuery $ .browser (для jQuery 1.9>) і додав події .trigger до події зв’язування миші, як слід:

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

.Trigger запобігає необхідності подвійного клацання на елементі, запускаючи обробник події .click на мишіцентр (або початковий клацання) елемента при перегляді на iPhone або iPad. Це може бути не найелегантнішим рішенням, але в моєму випадку воно чудово працює і використовує плагін, який я вже мав, і вимагав від мене додати єдиний рядок коду, щоб отримати мої існуючі події, що працюють під цими пристроями.

Ви можете отримати плагін jQuery $ .browser тут: https://github.com/gabceb/jquery-browser-plugin

Просто поліпшення, щоб уникнути перенаправлення, коли помилково проведіть пальцем по посиланню.

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

Маючи натхнення від MacFreak, я зібрав щось, що працює для мене.

Цей метод js запобігає наклеюванню на накладку на ipad, а також запобігає реєстрації клацань у двох випадках як два клацання. У CSS, якщо у вас є будь-які: наведіть курси psudo у своєму css, змініть їх на .hover Наприклад .some-class: наведіть на .some-class.hover

Перевірте цей код на ipad, щоб побачити, як метод css та js hover по-різному поводиться (лише з ефектом наведення). Кнопка CSS не має оскарженого сповіщення про натискання http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

Щоб посилання працювали, не порушуючи прокрутку дотику, я вирішив це за допомогою події "tap" jQuery Mobile:

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

Я запізнився, я знаю, але це один із найпростіших рішень, які я знайшов:

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

Це працює не лише для посилань (тегів прив’язки), але й для інших елементів. Сподіваюся, це допомагає.

Цей короткий фрагмент, здається, працює. Запустити подію натискання, коли натиснути посилання:

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

Ніхто з іншої відповіді не працює для мене. У моєму додатку є багато слухачів подій, власні прапорці та посилання, у яких є слухачі та посилання без слухачів.

Я використовую це:

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

Це працює для мене, коли у вас є спадне меню jquery ui

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}

Уникайте зміни стилю "дисплея" всередині події hover css. У мене було "display: block" у режимі наведення. Після вилучення ios перейшов на підкладки одним натисканням. До речі, здається, що останні оновлення IOS виправили цю "функцію"

Найпростіший спосіб вирішити подвійне клацання по IPad - це обгортання css для ефекту наведення в медіа-запит @media (pointer: fine):

@media (pointer: fine) {
  a span {
    display: none;
  }
  a:hover span {
    display: inline-block;
  }
}

CSS, який обгорнув цей медіа-запит, застосовуватиметься лише на робочому столі.

Пояснення цього рішення знаходиться тут https://css-tricks.com/annoying-mobile-double-tap-link-issue/

Ви можете перевірити navigator.userAgentтак:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

але вам доведеться перевірити, чи немає чорнобривців, дроїдів, інших програм із сенсорним екраном. Ви також можете зв'язати миші лише у тому випадку, якщо userAgent містить Mozilla, IE, Webkit або Opera, але для деяких пристроїв все ще потрібно екранувати, оскільки Droid, наприклад, повідомляє про свою рядок userAgent як:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Рядок iPhone схожий. Якщо ви просто екрануєте для iPhone, iPod, iPad, Android та Blackberry, ви можете отримати більшість кишенькових комп'ютерів, але не всі з них.

Просто зробіть запит на мультимедійний CSS, який виключає планшети та мобільні пристрої та покладіть на нього курсор. Для цього вам не потрібні jQuery або JavaScript.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

І не забудьте додати це до голови html, щоб переконатися, що воно обчислюється фактичними пікселями, а не роздільною здатністю.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />