Question

我写了一个简单的功能，可以在PC上完美运行，但不能在移动设备上运行。每当我点击.link p时，它都不会触发trigger('click')。也许问题出在其他地方，但我无法将其本地化。非常感谢帮助。

HTML：

<div class="galeria">
<div class="gallery">
    <figure class="gallery-item">
        <div class="gallery-icon portrait">
            <a data-caption="" href="">
                <img/>
            </a>
        </div>
        <figcaption class="wp-caption-text gallery-caption">Etykieta</figcaption>
        <div class="overlay"></div>
        <div class="link">
            <p>Whatever</p>
        </div>
    </figure>
</div>
</div>

jQuery的：

var $container = jQuery('.galeria')
jQuery('.galeria').isotope({
itemSelector: '.galeria .gallery',
layoutMode: 'masonry',
});

jQuery('.galeria .gallery-item').append('<div class="overlay"></div>');

jQuery('.galeria .gallery').each(function() {
var text = jQuery(this).find('.gallery-item:first-child .gallery-caption').text();
jQuery(this).find('.gallery-item').append('<div class="link"><p>'+text+'</p></div>');
});

var marginTop = jQuery('.link').height();
jQuery('.link').css('margin-top',-marginTop/2)


// here is the function I'm concerned about, but maybe the problem is somwhere else
jQuery('.link p').on('click touchstart',function() {
jQuery(this).closest('.gallery-item').find('a').trigger('click');
});

我想我给了你们所有需要的信息，如果你需要更多的问题而不是吝啬我，请。问候。

---- ---- EDIT

Here是指向代码所在网站的链接。

----编辑2 ----

好的，我没有描述我需要它做什么。通常情况下，a中的链接.gallery-icon会在您点击它时打开一个灯箱库。但我想在其他地方创建另一个可点击元素，以使CSS样式更复杂（动画，叠加等），这就是为什么上面的函数会在内部添加另一个div .link并使用可点击的p。点击p提到的a链接正在被触发。当我删除创建其他div并触发链接的所有功能时，直接点击a在移动设备上正常工作。

Answer 1

你的代码不完整，所以在尝试理解时我可能错了，但我认为你的问题是你试图触发＆＃34;点击＆＃34; <a>元素上的事件，用户将用户重定向到另一个页面。

如果你打算这样做，你应该使用以下代码（在你的点击touchstart＆＃39;事件中）：

window.location.href = jQuery(this).closest('.gallery-item').find('a').attr('href');

- 编辑 -

当我检查您的网站时，您的链接（ .link a ）元素可能在移动设备上不可见，因为它仅在光标悬停时显示 .gallery-item

移动设备的最佳解决方案是将事件分配给用户可以在浏览器中看到的元素而不会悬停任何内容（例如 .gallery-item 或 .overlay ）。< / p>
- 编辑2 -

正如我之前提到的，你应该为一个用户可以在移动浏览器中看到的元素分配一个事件而不会悬停在任何东西上（就像在移动浏览器上一样，这是不可能的）。

你可以这样做：

jQuery('.gallery-item').on('click touchstart',function() { jQuery(this).closest('.gallery-item').find('a').trigger('click'); });

如果代码无法与 .gallery-item 一起使用，则必须使用指向用户可见的元素且位于顶部的其他选择器（位于页面上的其他元素上方）。

.trigger（＆＃39;单击＆＃39;）;不在代码中使用移动或语法？

1 个答案: