Мой сайт показывает результаты поиска изображений в 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>
отличные работы спасибо! – Tom
Да, но я узнал, что он работает так же, как вы сказали, вам нужно использовать только идентификатор родительского div. Спасибо огромное ! – Tom
Нет проблем. Не забудьте попытаться использовать ближайшего родителя, чтобы минимизировать обход DOM. Кроме того, постарайтесь не создавать новый 'div', чтобы дать ему родительский. Он создает дополнительный слой в обход DOM и делает код более раздутым. – light