it-swarm.com.ru

Как имитировать зависание в браузерах с сенсорным экраном?

С некоторым HTML, как это:

<p>Some Text</p>

Тогда некоторые CSS, как это:

p {
  color:black;
}

p:hover {
  color:red;
}

Как разрешить длительное касание на сенсорном устройстве для репликации при наведении курсора? Я могу изменить разметку/использовать JS и т.д., Но не могу придумать простой способ сделать это.

112
Rich Bradshaw

Хорошо, я решил это! Это предполагает незначительное изменение CSS и добавление JS.

Использование jQuery для упрощения:

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

На английском языке: когда вы начинаете или заканчиваете касание, включите или выключите класс hover_effect.

Затем в своем HTML добавьте наведение класса ко всему, с чем вы хотите, чтобы это работало. В вашем CSS замените любой экземпляр:

element:hover {
    rule:properties;
}

с

element:hover, element.hover_effect {
    rule:properties;
}

И просто для дополнительной полезности, добавьте это и в свой CSS:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

Чтобы остановить браузер, просит вас скопировать/сохранить/выбрать изображение или что-то еще.

Легко!

164
Rich Bradshaw

Все, что вам нужно сделать, это привязать сенсорный запуск к родителю. Примерно так будет работать:

$('body').on('touchstart', function() {});

Вам не нужно ничего делать в функции, оставьте это пустым. Этого будет достаточно для того, чтобы навести курсор на прикосновение, поэтому прикосновение ведет себя как: hover и менее похоже: active. iOS волшебство.

50
Razvan Cercelaru

Попробуй это:

<script>
document.addEventListener("touchstart", function(){}, true);
</script>

И в вашем CSS:

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/
}

С этим кодом вам не нужен дополнительный класс .hover!

39
Anselm

Чтобы ответить на ваш главный вопрос: «Как мне имитировать зависание в браузерах, поддерживающих сенсорный ввод?»

Просто разрешите «щелкнуть» по элементу (нажав на экран), а затем активируйте событие hover с помощью JavaScript.

var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
 // Trigger the `hover` event on the paragraph
 p.onhover.call(p);
};

Это должно работать, если на вашем устройстве есть событие hover (даже если оно обычно не используется).

Update: Я только что проверил эту технику на своем iPhone, и она, кажется, работает нормально. Попробуйте это здесь: http://jsfiddle.net/mathias/YS7ft/show/light/

Если вы хотите использовать «длинное касание» для запуска наведения, вы можете использовать приведенный выше фрагмент кода в качестве отправной точки и получать удовольствие от таймеров и прочего;)

23
Mathias Bynens

Дальнейшее улучшенное решение

Сначала я использовал подход Rich Bradshaw, но затем начали появляться проблемы. Выполнив событие e.preventDefault () для 'touchstart', страница больше не прокручивается и ни длительное нажатие не может вызвать меню параметров, ни увеличение двойным щелчком не может завершить выполнение. 

Решением может быть выяснение того, какое событие вызывается, и просто e.preventDefault () в последующем, 'touchend'. Поскольку прокрутка 'touchmove' предшествует 'touchend', она остается по умолчанию, и 'click' также запрещается, так как она появляется после слов в цепочке событий, примененной к мобильному устройству, например:

// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {

    // If event is 'touchend' then...
    if (e.type == 'touchend') {
        // Ensuring we event prevent default in all major browsers
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }

    // Add class responsible for :hover effect
    $(this).toggleClass('hover_effect');
});

Но затем, когда появляется меню параметров, оно больше не запускает 'touchend', ответственное за отключение класса, и в следующий раз поведение при наведении будет наоборот, полностью перепутано. 

Решение тогда будет, опять же, условно выяснить, в каком событии мы находимся, или просто делать отдельные, и использовать addClass () и removeClass () соответственно в 'touchstart' и 'touchend', гарантируя, что он всегда начинается и заканчивается, соответственно добавляя и удаляя вместо условного выбора. В завершение мы также свяжем обратный вызов удаления с типом события 'focusout', оставаясь ответственными за очистку любого класса наведения ссылки, который может оставаться и никогда не повторяться, например, так:

$('.static_parent').on('touchstart', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('touchend focusout', '.link', function (e) {
    // Think double click zoom still fails here
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    $(this).removeClass('hover_effect');
});

Внимание: Некоторые ошибки все еще встречаются в двух предыдущих решениях, и, также подумайте (не проверено), двойное нажатие по-прежнему не работает.

Опрятный и Надеюсь, что Ошибка бесплатно (не :)) Решение Javascript

Теперь, для второго, более чистого, аккуратного и отзывчивого подхода, использующего только javascript (нет сочетания между классом .hover и псевдо: hover) и откуда можно напрямую вызывать поведение ajax на универсальном (мобильном и настольном) Событие 'click', я нашел довольно хорошо отвеченный вопрос из которого я наконец понял, как можно смешивать события касания и мыши вместе без нескольких обратных вызовов событий, неизбежно меняющих друг друга в цепочке событий. Вот как:

$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
    $(this).removeClass('hover_effect');

    // As it's the chain's last event we only prevent it from making HTTP request
    if (e.type == 'click') {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        // Ajax behavior here!
    }
});
13
Alexandre Rosário

Эффект мыши hover не может быть реализован в сенсорном устройстве. Когда я появился в той же ситуации в safariios, я использовал :active в css для создания эффекта.

то есть.

p:active {
  color:red;
}

В моем случае это работает. Может быть, это также случай, который может быть использован без использования JavaScript. Просто попробуйте.

3
sijo vijayan

Добавьте этот код, а затем установите класс «tapHover» для элементов, которые вы хотели бы работать таким образом…. При первом нажатии на элемент он получит псевдокласс «: hover» и класс «tapped». Событие щелчка будет предотвращено . При повторном нажатии на тот же элемент - событие щелчка будет запущено.

// Activate only in devices with touch screen
if('ontouchstart' in window)
{
    // this will make touch event add hover pseudoclass
    document.addEventListener('touchstart', function(e) {}, true);

    // modify click event
    document.addEventListener('click', function(e) {
        // get .tapHover element under cursor
        var el = jQuery(e.target).hasClass('tapHover')
            ? jQuery(e.target)
            : jQuery(e.target).closest('.tapHover');

        if(!el.length)
            return;

        // remove tapped class from old ones
        jQuery('.tapHover.tapped').each(function() {
            if(this != el.get(0))
                jQuery(this).removeClass('tapped');
        });

        if(!el.hasClass('tapped'))
        {
            // this is the first tap
            el.addClass('tapped');
            e.preventDefault();
            return false;
        }
        else
        {
            // second tap
            return true;
        }
    }, true);
}
.box {
	float:		left;
	
	display:	inline-block;
	margin:		50px 0 0 50px;
	width:		100px;
	height:		100px;
	overflow:	hidden;
	
	font-size:	20px;
	
	border:		solid 1px black;
}
.box.tapHover {
	background:	yellow;
}
.box.tapped {
	border:		solid 3px red;
}
.box:hover {
	background:	red;
}
<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>

2
l00k

Один из способов сделать это - сделать эффект наведения при запуске касания, а затем убрать эффект наведения при перемещении или окончании касания.

Это то, что Apple должна сказать о сенсорной обработке в целом, так как вы упоминаете iPhone.

1
drawnonward

Без устройства (или, скорее, браузера) конкретного JS я почти уверен, что вам не повезло.

Правка: думал, что вы хотели избежать этого, пока я не перечитал ваш вопрос. В случае Mobile Safari вы можете зарегистрироваться, чтобы получать все сенсорные события, аналогичные тем, которые вы можете делать с нативными UIView-s. Не могу найти документацию прямо сейчас, но постараюсь.

1
Joonas Trussmann

Мой личный вкус - приписывать стили :hover к состоянию :focus, например:

p {
    color: red;
}

p:hover, p:focus {
    color: blue;
}

Затем со следующим HTML:

<p id="some-p-tag" tabindex="-1">WOOOO</p>

И следующий JavaScript:

$("#some-p-tag").on("touchstart", function(e){
    e.preventDefault();
    var $elem = $(this);

    if($elem.is(":focus")) {
        //this can be registered as a "click" on a mobile device, as it's a double tap
        $elem.blur()
    }
    else {
        $elem.focus();
    }
});
1
pimbrouwers

Сочетание нативного Javascript и jQuery:

var gFireEvent = function (oElem,sEvent) 
{
 try {
 if( typeof sEvent == 'string' && o.isDOM( oElem ))
 {
  var b = !!(document.createEvent),
     evt = b?document.createEvent("HTMLEvents"):document.createEventObject();
  if( b )    
  {  evt.initEvent(sEvent, true, true ); 
    return !oElem.dispatchEvent(evt);
  }
  return oElem.fireEvent('on'+sEvent,evt);
 }
 } catch(e) {}
 return false;
};


// Next you can do is (bIsMob etc you have to determine yourself):

   if( <<< bIsMob || bIsTab || bisTouch >>> )
   {
     $(document).on('mousedown', function(e)
     {
       gFireEvent(e.target,'mouseover' );
     }).on('mouseup', function(e)
     {
       gFireEvent(e.target,'mouseout' );
     });
   }
0
Codebeat

Самое простое решение, которое я нашел: у меня было несколько тегов <span> с правилами: hover css. Я переключился на <a href = "javascript: void (0)"> и вуаля. Стили наведения в iOS начали работать.

0
Becario Senior

Решено 2019 - Наведите на Touch

Теперь кажется, что лучше вообще избегать использования hover с ios или touch. Приведенный ниже код применяет ваш CSS, пока поддерживается касание, и без других всплывающих окон ios. Сделай это;

  1. Jquery add: $ ("p"). On ("touchstart", function (e) {$ (this) .focus (); e.preventDefault ();});

  2. CSS: замените p: hover на p: focus и добавьте p: active 

Опции;

  • заменить селектор jquery p на любой класс и т. д.

  • чтобы сохранить эффект, сохраните также p: hover и добавьте body {cursor: ponter;}, чтобы касание в любом месте заканчивало его

  • попробуйте события click & mouseover, а также touchstart в том же коде (но не тестировали)

  • удалить e.preventDefault (); чтобы пользователи могли использовать всплывающие окна ios, например, копировать

Заметки 

  • только для текстовых элементов, ios может по-разному обрабатывать ввод и т. д.

  • протестировано только на iphone XR ios 12.1.12 и ipad 3 ios 9.3.5 с использованием Safari или Chrome.

0
darren

Использование может также использовать CSS, добавить фокус и активный (для IE7 и ниже) к скрытой ссылке. Пример меню ul внутри div с классом menu:

.menu ul ul {display:none; position:absolute; left:100%; top:0; padding:0;}
.menu ul ul ul {display:none; position:absolute; top:0; left:100%;}
.menu ul ul a, .menu ul ul a:focus, .menu ul ul a:active { width:170px; padding:4px 4%; background:#e77776; color:#fff; margin-left:-15px; }
.menu ul li:hover > ul { display:block; }
.menu ul li ul li {margin:0;}

Уже поздно и не проверено, должно сработать ;-)

0
Mark Groen