2015-06-26 6 views
0

Мой сайт показывает результаты поиска изображений в Google. Когда пользователь нажимает на изображение, я не хочу, чтобы он перенаправлялся на исходную страницу изображения. Вместо этого он должен сделать что-то еще. Поэтому я пытаюсь использовать метод предотвращения, но он не работает.preventDefault javascript после функции/события

Название класса для изображения 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> 

ответ

0

Я считаю, что проблема с образами с именем класса .gs-image-box не существует (пока) при создании привязки.

Вам необходимо связать его с чем-то, что существует, например.

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

Конечно, вам не нужно использовать документ. Любой родитель, который существует, будет делать.

+0

отличные работы спасибо! – Tom

+0

Да, но я узнал, что он работает так же, как вы сказали, вам нужно использовать только идентификатор родительского div. Спасибо огромное ! – Tom

+0

Нет проблем. Не забудьте попытаться использовать ближайшего родителя, чтобы минимизировать обход DOM. Кроме того, постарайтесь не создавать новый 'div', чтобы дать ему родительский. Он создает дополнительный слой в обход DOM и делает код более раздутым. – light

0

Попытка установить контейнер для загрузки изображений, так что-то вроде этого:

<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. Старайтесь избегать использования документа каждый раз, когда сможете.

С уважением!

+0

Works! БЛАГОДАРЯ ! – Tom

0

Постарайтесь предотвратить по умолчанию навигации этого пути

$('a.gs-image').attr('href', '') 
Смежные вопросы