Question

我的网站显示了谷歌图片搜索的结果。当用户点击图像时，我不希望他被重定向到图像的源页面。相反，它应该做其他事情。所以我正在尝试使用prevent方法，但它不起作用。

图片gs-image-box的类名，所以我将其用作代码的参考。我认为问题是在脚本之后图像被加载到站点中（防止执行默认方法）。但我不知道如何解决这个问题。有人可以帮忙吗？提前致谢

<html>
  <head>
    <style>

      #searchForm {
              visibility: hidden;
      }
       .gs-text-box, .gsc-cursor, .gsc-title, .gsc-twiddleRegionCell, .gsc-above-wrapper-area{
        visibility: hidden;

      }
    </style>


    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>   
    <script src="https://www.google.com/jsapi"
        type="text/javascript"></script>

    <title>blub blie bla</title>    
  </head>
  <body>
    <div align="center">Hi
        <div id="searchresults">
         <input id="inputfield" value="Type something in here" onfocus="if(value=='Type something in here') value = ''"
      oninput="myTest()"/>

     <div id="searchcontrol"></div>
     </div>

    </div> 
    <div id="searchForm"></div>

    <script>
    //google search api from the homepage
     google.load('search', '1');
        function OnLoad(element) {

         var searchControl = new google.search.SearchControl();
         var drawOptions = new google.search.DrawOptions(); 
         drawOptions.setSearchFormRoot(document.getElementById("searchForm"));     
          searchControl.setResultSetSize(2);
          searchControl.addSearcher(new google.search.ImageSearch());   
          searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

         searchControl.execute(element);
        }
     //executes search after text is typed in the input field 
        function myTest(){
        var x = document.getElementById("inputfield").value;

         if (x.length > 1){
          google.setOnLoadCallback(OnLoad( document.getElementById("inputfield").value)); 

//my different approaches to prevent the image from linking to a webpage 
            $(function() {

     $('.gs-image-box').click(function(e){
      e.preventDefault();
                                        });
                         });

 document.getElementsByClassName("gs-image-box")[0].addEventListener("click", function(event){
        event.preventDefault()
    });


                      }
                        }

    </script>

  </body>
</html>

Answer 1

尝试设置一个容器来加载图像，所以做这样的事情：

<div id="container"></div>
<script>
$(function(){
    $("div#container").on("click", ".gs-image-box", function(e){
        e.preventDefault();
    });    
});
</script>

如果您不想设置容器，那么您可以执行以下操作：

<script>
$(function(){
    $(document).on("click", ".gs-image-box", function(e){
        e.preventDefault();
    });    
});
</script>

PS。尽量避免每次都使用文档。

问候！

Answer 2

我认为问题在于，在进行绑定时，尚未存在类名为.gs-image-box的图像。

您需要将其绑定到存在的内容，例如

$(document).on('click', '.gs-image-box', function(){
    e.preventDefault();
});

当然，您不必使用文档。任何存在的父母都会这样做。

Answer 3

尝试以这种方式阻止默认导航

$('a.gs-image').attr('href', '')

在函数/事件

3 个答案: