javascript - 如何禁用点击但保留叠加效果

Question

在 Wordpress 网站中，我需要禁用一些缩略图的点击，当鼠标悬停在页面http://srougi.biz/gb/produtos时保持覆盖效果。我没有找到办法。

Answer 1

使用 Javascript 禁用缩略图上的 onclick() 事件并保留 onmouseover() 事件的效果。

阅读以下链接：http ://www.htmlgoodies.com/beyond/javascript/article.php/3470771

假设您的缩略图是图像。以下将是您的 html：

<img id="thumbnail" src="sourcefile.jpg" OnMouseOver="MouseOverEvent()" OnClick="return false;"/>

以下将是您的 javascript 元素（您可以将其添加到带有标签的 html 文件中）

<script>
function OnMouseOverEvent()
{
//you can set your effects here
}
</script>

Answer 2

您当前在该页面上使用 jQuery。也许这可以工作。

jQuery('div.thumbail > a').unbind('click');

Answer 3

从标签中删除 hrf

<a href="http://srougi.biz/gb/portfolio/acessorios/" title="Acessórios">

改成

<a title="Acessórios">

Answer 4

正如其他人所提到的，您无法在 CSS 中处理点击事件。如果您想禁用所有缩略图的点击，使用 jQuery（为简单起见），您可以将其直接添加到您网站的头部：

<script src="path/to/your/jquery.js"></script>

<script>

    (function($) {

        // find all 'a' elements inside of the 'thumbnail' class
        var block_click = $('.thumbnail').find('a'); 

        // function to create the new behavior you want to achieve
        function prevent_default_click_behavior(e) {

            // You can use this
            e.preventDefault();

            // Or this method
            return false;

        }

        // then, bind the desired behavior to the elements click event
        block_click.on('click', prevent_default_click_behavior);

    })(jQuery);

</script>

如果要禁用某些图像上的链接，而将其留给其他图像，则可以使用不同的类在两者之间指定。一个简单的实现可能如下所示：

<div class="thumbnail stop-click">
  <a href="#">
    <img src="src/to/image/jpg" alt="">
  </a>
</div>

现在有了 javascript，我可以很容易地对我所有的缩略图说“使用我的行为”和“停止点击”类。

<script>

    (function($) {

        // all 'a' elements inside the 'thumbnail' class that also has the 'stop-click' class
        var block_click = $('.thumbnail.stop-click').find('a'); 

        // function to create the new behavior you want to achieve
        function prevent_default_click_behavior(e) {

            // You can use this
            e.preventDefault();

            // Or this method
            return false;

        }    

        // then, bind the desired behavior to the elements click event
        block_click.on('click', prevent_default_click_behavior);

    })(jQuery);

</script>