Jquery悬停功能，并在平板电脑上点击 [英] Jquery hover function and click through on tablet
问题描述
我有一个jQuery幻灯片，它使用导航列表来切换幻灯片图像。它是如何工作的，当你将鼠标悬停在导航列表上时，它将突出显示（'.active'）和关联的图像切换到该列表。在导航列表中有链接，也可以点击进入不同的页面。
我需要在平板电脑上工作，以便当用户点击导航列表中，它将变为活动状态，然后图像幻灯片会切换，然后如果再次点击，则会进入该链接。现在发生的事情是，只要你点击它，它就会变得活跃并点击。
这里是jquery
$（。main_image .desc）。show（）; //显示横幅
$（。main_image .block）。animate（{opacity：0.8}，1）; //设置不透明
//单击和悬停事件缩略图列表
$（。image_thumb ul li：first）。addClass（'active'）;
$（。image_thumb ul li）。hover（function（e）{
//设置变量
e.preventDefault（）;
var imgAlt = $（this）.find（'img'）。attr（alt）; //获取图像的Alt标签
var imgTitle = $（this）.find（'a.imgloc'）。attr（ href）; //获取主图像URL
var imgDesc = $（this）.find（'。block'）。html（）; //获取块的HTML
var imgDescHeight = $（ （）.main_image）。find（'。block'）。height（）; //计算块的高度
if（$（this）.is（.active））{//如果它已经被激活，然后...
返回false; //不要点击
} else {
//为Teaser设置动画
$（。main_image .block）。animate（ {opacity：0，marginBottom：-imgDescHeight}，250，function（）{
$（。main_image .block）。html（imgDesc）.animate（{opacity：0.8，marginBottom：0 ）;
$（。main_image img）。attr（{src：imgTitle，alt：imgAlt}）;
}）;
}
$ （。图片_ thumb ul li）。removeClass（'active'）; //删除所有列表中的'active'类
$（this）.addClass（'active'）; //仅在此列表上添加'active'类
return false;
}）;
这里是nav列表的html
< div class =image_thumb>
< ul>
< li id =one>
< h2>< a href =styleguide.html>文字文字文字< / a>< / h2>
< p>< a href =styleguide.html>文字文字文字< / a>< / p>
< a class =imglochref =content / images / home / 01.jpg>< / a>
< div class =block>
< p>文字文字文字< / p>
< / div>
< / li>
< / ul>
< / div>
如果任何人都可以提供帮助，那就太好了！
- 编辑 -我还想补充一点，如果用户使用了其中一个元素，然后点击另一个元素，第一个需要重置，以便如果他们重新使用它，它不会自动点击。
：在最近再次使用这个脚本之后，我意识到事情可以做得简单得多，根本不需要任何标志。
原始答案：
今天有同样的问题。我使用data属性解决了这个问题，它实际上绑定了一个touchstart事件（这是一个基本的触摸设备检查，但您可以使其更加彻底）。尝试使用以下代码，替换'clickable_element'以满足您的需求。
$（'clickable_element'）。live（ touchstart，函数（e）{
if（$（this）.data（'clicked_once'））{
//元素已被挖掘（悬停），重置'clicked_once'数据标志并返回true
$（this）.data（'clicked_once'，false）;
return true;
} else {
//元素尚未被挖掘（悬停） clicked_once'data flag to true
e.preventDefault（）;
$（this）.trigger（mouseenter）; //可选：触发悬停状态，为preventDefault（）; b $ b $（this）.data（'clicked_once'，true）;
}
}）;
这会停止平板电脑在第一次敲击时激活链接，并在第二次敲击时激活它。
编辑：如果有多个链接元素需要在点击其他元素时进行重置，请尝试附加数据属性到父容器：
HTML：
< ; div id =parent-element>
< a href =id =1>链接1< / a>
< a href =id =2>连结2< / a>
< a href =id =3>连结3< / a>
< / div>
jQuery：
< $（$）$（'＃parent-element a'）。live（touchstart，function（e）{
var $ link_id = $（this）.attr（'id'）; $ b $ （$（this）.parent（）。data（'clicked'）== $ link_id）{
//元素已被挖掘（徘徊），重置父元素上的'clicked'数据标志并返回true （激活链接）
$（this）.parent（）。data（'clicked'，null）;
return true;
} else {
//元素尚未点击（悬停），将父元素上的'clicked'数据标志设置为点击链接的id，并防止点击
e.preventDefault（）; //返回false;在这个else语句的末尾会做同样的事情
$（this）.trigger（mouseenter）; //可选：触发悬停状态，因为preventDefault（）;打破了这个，我建议添加一个带有addClass的类，因为这更可靠。 b $ b $（this）.parent（）。data（'clicked'，$ link_id）;
}
}）;
I have a jquery slideshow that that uses a navigation list to switch out the slideshow images. How it works is when you hover over the nav list it highlights ('.active') and the associated image switches to that. There are links inside the nav list which can also be clicked to go to a different page.
I need this to work on a tablet so that when the person taps the nav list, it becomes active, then the image slideshow switches, then if you tap again it follows through to that link. Right now what is happening is that as soon as you tap it, it becomes active AND clicks through.
Here's the jquery
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").hover(function(e){
//Set Variables
e.preventDefault();
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.8, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
});
And here's the html for the nav list
<div class="image_thumb">
<ul>
<li id="one">
<h2><a href="styleguide.html">Text Text Text</a></h2>
<p><a href="styleguide.html">Text Text Text</a></p>
<a class="imgloc" href="content/images/home/01.jpg"></a>
<div class="block">
<p>Text Text Text</p>
</div>
</li>
</ul>
</div>
Here is an example of how it works: ocgoodwill.org
If anyone can help that would be great!
-- EDIT --
I also want to add that if a user has tapped onto one of the elements, then taps on a different one, the first one needs to be reset so that if they tap back onto it, it doesn't automatically click through.
UPDATE: after recently resorting to using this script again, I realized things can be done a lot simpler, not requiring any flags at all.
See revised code on my website.
Original answer:
Had the exact same issue today. I solved it using the data attribute, live bound to a touchstart event (which is a basic touch-device check, but you could make this more thorough). Try using the following code, replacing the 'clickable_element' to suit your needs.
$('clickable_element').live("touchstart",function(e){
if ($(this).data('clicked_once')) {
// element has been tapped (hovered), reset 'clicked_once' data flag and return true
$(this).data('clicked_once', false);
return true;
} else {
// element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
e.preventDefault();
$(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
$(this).data('clicked_once', true);
}
});
This should stop the tablet from activating the link on the first tap, activating it on the second tap.
Edit: in case of multiple link elements, which need to be 'reset' when one of the other elements are clicked, try attaching the data attribute to the parent container:
The HTML:
<div id="parent-element">
<a href="" id="1">Link 1</a>
<a href="" id="2">Link 2</a>
<a href="" id="3">Link 3</a>
</div>
jQuery:
$('#parent-element a').live("touchstart",function(e){
var $link_id = $(this).attr('id');
if ($(this).parent().data('clicked') == $link_id) {
// element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
$(this).parent().data('clicked', null);
return true;
} else {
// element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
e.preventDefault(); // return false; on the end of this else statement would do the same
$(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
$(this).parent().data('clicked', $link_id);
}
});
这篇关于Jquery悬停功能，并在平板电脑上点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
