Jak symulować najechanie na kursor przy przeglądarkach z obsługą touch in touch?
Z jakimś HTML takim:
<p>Some Text</p>
Potem jakiś CSS taki:
p {
color:black;
}
p:hover {
color:red;
}
Jak mogę pozwolić, aby długie dotknięcie na urządzeniu obsługującym dotyk powtórzyło hover? Mogę zmienić znaczniki / używać JS itp, ale nie mogę wymyślić łatwego sposobu, aby to zrobić.
13 answers
Ok, rozgryzłem to! Polega na nieznacznej zmianie CSS i dodaniu JS.
Używanie jQuery do ułatwienia:
$(document).ready(function() {
$('.hover').on('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
W języku angielskim: kiedy zaczynasz lub kończysz dotyk, Włącz lub wyłącz klasę hover_effect
.
Następnie, w Twoim HTML, dodaj kursor klasy do wszystkiego, z czym chcesz, aby to działało. W CSS zastąp dowolną instancję:
element:hover {
rule:properties;
}
Z
element:hover, element.hover_effect {
rule:properties;
}
I dla dodatkowej użyteczności, dodaj to również do swojego CSS:
.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
Aby zatrzymać przeglądarkę pytającą możesz skopiować/zapisać / wybrać obraz lub cokolwiek.
Spokojnie!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-15 06:48:03
Wszystko, co musisz zrobić, to związać touchstart na rodzicu. Coś takiego zadziała:
$('body').on('touchstart', function() {});
Nie musisz nic robić w funkcji, zostaw ją pustą. To wystarczy, aby uzyskać hovers na dotyku, więc dotyk zachowuje się bardziej jak: hover i mniej jak: active. magia iOS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-15 06:48:18
Spróbuj tego:
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
I w 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*/
}
Z tym kodem nie potrzebujesz dodatkowego .kurs!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-22 22:17:37
Aby odpowiedzieć na twoje główne pytanie: "jak symulować najechanie na kursor przy przeglądarkach z obsługą touch in touch?"
Po prostu pozwól "kliknąć" element (dotykając ekranu), a następnie uruchom Zdarzenie hover
za pomocą JavaScript.
var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
// Trigger the `hover` event on the paragraph
p.onhover.call(p);
};
To powinno działać, o ile na Twoim urządzeniu jest Zdarzenie hover
(nawet jeśli zwykle nie jest używane).
Aktualizacja: właśnie przetestowałem tę technikę na moim iPhonie i wydaje się, że działa dobrze. Wypróbuj go tutaj: http://jsfiddle.net/mathias/YS7ft/show/light/
Jeśli chcesz użyć "długiego dotknięcia", aby aktywować hover, możesz użyć powyższego fragmentu kodu jako punktu wyjścia i bawić się z licznikami i takimi tam ;)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-24 13:02:52
Dalsze Ulepszone Rozwiązanie
Najpierw wybrałem podejście Rich Bradshawa , ale potem zaczęły się pojawiać problemy. Wykonując Zdarzenie e.preventDefault() na zdarzeniu 'touchstart', strona nie przewija się i ani długie naciśnięcie nie jest w stanie uruchomić menu opcji, ani podwójne kliknięcie zoom nie jest w stanie zakończyć wykonania.
Rozwiązaniem może być ustalenie, które zdarzenie jest wywoływane i po prostu e. preventDefault () w późniejszym, 'touchend' . Ponieważ scroll 'touchmove' występuje przed 'touchend' pozostaje domyślnie, a 'click' jest również zapobiegany, ponieważ pojawia się po słowach w łańcuchu zdarzeń zastosowanym do telefonu komórkowego, jak tak:
// 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');
});
Ale wtedy, gdy pojawi się menu options, nie będzie już uruchamiane 'touchend' odpowiedzialne za wyłączenie klasy, a następnym razem zachowanie kursora będzie na odwrót, całkowicie pomieszane.
Rozwiązaniem byłoby wtedy, znowu, warunkowo ustalając, w którym zdarzeniu się znajdujemy, lub po prostu robiąc oddzielne i używając addClass()i removeClass() odpowiednio na 'touchstart' i 'touchend', upewniając się, że zawsze zaczyna się i kończy, odpowiednio dodając i usuwając zamiast warunkowo decydować o tym. Aby zakończyć, powiązamy również usunięcie wywołania zwrotnego z typem zdarzenia 'focusout', pozostając odpowiedzialnym za wyczyszczenie klasy hover linku, która może pozostać włączona i nigdy nie zostanie ponownie odwiedzona znowu tak:
$('.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');
});
Atention: Niektóre błędy nadal występują w dwóch poprzednich rozwiązaniach i, również myśleć (nie testowane), podwójne kliknięcie zoom nadal zawodzi.
Tidy i miejmy nadzieję, że bez błędów (nie :)) Javascript Solution
Teraz , przez sekundę, czystsze, uporządkowane i responsywne, podejście po prostu za pomocą javascript (bez mieszania .Klasa hover i pseudo :hover) i skąd można bezpośrednio wywołać zachowanie ajax na uniwersalnym (mobilnym i desktopowym) 'click' event, znalazłem dość dobrze odpowiedziałeś na pytanie z którego w końcu zrozumiałem, jak Mogę mieszać zdarzenia dotykowe i myszy razem bez kilku wywołań zwrotnych nieuchronnie zmieniających się nawzajem w łańcuchu zdarzeń. Oto jak:
$('.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!
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:23
Efekt Myszy hover
nie może być zaimplementowany w urządzeniu dotykowym . Kiedy pojawiam się z tą samą sytuacją w safari
ios
użyłem :active
w css, aby uzyskać efekt.
Ie.
p:active {
color:red;
}
W moim przypadku działa .Być może jest to również przypadek, który może być używany bez użycia javascript. Spróbuj.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-11 12:13:30
Dodaj ten kod, a następnie Ustaw klasę "tapHover" do elementów, które chcesz pracować w ten sposób. Po pierwszym dotknięciu elementu zyskuje on pseudoclass": hover "i klasę "tapped". Kliknij zdarzenie zostanie zablokowane. Po drugim dotknięciu tego samego elementu-Zdarzenie click zostanie wywołane.
// 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-07 11:57:42
Bez urządzenia (a raczej przeglądarki) specyficzne JS jestem prawie pewien, że masz pecha.
Edit: myślałem, że chcesz tego uniknąć, dopóki nie przeczytam ponownie twojego pytania. W przypadku mobilnego Safari możesz zarejestrować się, aby uzyskać wszystkie zdarzenia dotykowe podobne do tego, co możesz zrobić z natywnym UIView-s.nie możesz teraz znaleźć dokumentacji, spróbuje jednak.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-17 18:29:36
Jednym ze sposobów, aby to zrobić, byłoby zrobić efekt hover, gdy dotyk zaczyna, a następnie usunąć efekt hover, gdy dotyk porusza się lub kończy.
To jest to, co Apple ma do powiedzenia o Touch handling w ogóle, ponieważ wspominasz iPhone.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-17 19:36:21
Moim osobistym gustem jest przypisywanie stylów :hover
do stanu :focus
, jak również:
p {
color: red;
}
p:hover, p:focus {
color: blue;
}
Następnie z następującym HTML:
<p id="some-p-tag" tabindex="-1">WOOOO</p>
Oraz następujący 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();
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-06 22:33:30
Mieszanka natywnego Javascript i 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' );
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 15:09:22
Najprostsze rozwiązanie, jakie znalazłem: miałem kilka znaczników z regułami: hover css w nich. Przełączyłem na i voila. Style hover w iOS zaczęły działać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-03 18:01:42
Use może też użyć CSS, dodać focus i active (dla IE7 i poniżej) do ukrytego linku. Przykład menu ul wewnątrz div z menu klasy:
.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;}
Jest późno i nieprzetestowane, powinno zadziałać; -)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-10 04:04:04