我有图像映射,我试图通过使用JTip打开另一个页面,但我需要此页面应该只在鼠标hover。 我的意思是我不希望在映射图像上有任何点击事件。
和Jquery是
$(document).ready(function(){ var toolTipActive = false; $("area.jTip").hover( function() { var offsetX = 10; var offsetY = 0; var areaCoords = this.coords.split(','); var mapPosition = $('img#image1').offset(); var tipTop = mapPosition.top + (areaCoords[1] * 1) + offsetY;; var tipLeft = mapPosition.left + (areaCoords[2] * 1) + offsetX; if (!toolTipActive) JT_show(this.href,this.id,this.alt,tipLeft,tipTop); toolTipActive = true; }, function() { JT_destroy(); toolTipActive =false; } ); }); function JT_destroy(){ $('div#JT').remove(); } function JT_show(url,linkId,title,posX,posY){ if(title == false)title=" "; var de = document.documentElement; var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; var hasArea = w - getAbsoluteLeft(linkId); var clickElementy = posY; //set y position var queryString = url.replace(/^[^?]+??/,''); var params = parseQuery( queryString ); if(params['width'] === undefined){params['width'] = 250}; if(params['link'] !== undefined){ $('#' + linkId).bind('click',function(){window.location = params['link']}); $('#' + linkId).css('cursor','pointer'); } if(hasArea>((params['width']*1)+75)){ $("body").append(""+title+"");//right side var arrowOffset = getElementWidth(linkId) + 11; //var clickElementx = getAbsoluteLeft(linkId) + arrowOffset; //set x position var clickElementx = posX; //set x position }else{ $("body").append(""+title+"");//left side var clickElementx = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position } $('#JT').css({left: clickElementx+"px", top: clickElementy+"px"}); $('#JT_copy').load(url); $('#JT').show(); } function getElementWidth(objectId) { x = document.getElementById(objectId); return x.offsetWidth; } function getAbsoluteLeft(objectId) { // Get an object left position from the upper left viewport corner o = document.getElementById(objectId) oLeft = o.offsetLeft // Get left position from the parent object //while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element // oParent = o.offsetParent // Get parent object reference // oLeft += oParent.offsetLeft // Add parent left position // o = oParent //} return oLeft } function getAbsoluteTop(objectId) { // Get an object top position from the upper left viewport corner o = document.getElementById(objectId) oTop = o.offsetTop // Get top position from the parent object while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element oParent = o.offsetParent // Get parent object reference oTop += oParent.offsetTop // Add parent top position o = oParent } return oTop } function parseQuery ( query ) { var Params = new Object (); if ( ! query ) return Params; // return empty object var Pairs = query.split(/[;&]/); for ( var i = 0; i < Pairs.length; i++ ) { var KeyVal = Pairs[i].split('='); if ( ! KeyVal || KeyVal.length != 2 ) continue; var key = unescape( KeyVal[0] ); var val = unescape( KeyVal[1] ); val = val.replace(/+/g, ' '); Params[key] = val; } return Params; } function blockEvents(evt) { if(evt.target){ evt.preventDefault(); }else{ evt.returnValue = false; } }
试试这个
$(function(){ $("#Map area").unbind('click').removeAttr("onclick")[0].onclick = null; });
只需点击一下即可返回false:
$('area.jTip').click(function(){ return false; });
将它与其他代码放在一起:
$(document).ready(function(){ var toolTipActive = false; $("area.jTip").hover( function() { var offsetX = 10; var offsetY = 0; var areaCoords = this.coords.split(','); var mapPosition = $('img#image1').offset(); var tipTop = mapPosition.top + (areaCoords[1] * 1) + offsetY;; var tipLeft = mapPosition.left + (areaCoords[2] * 1) + offsetX; if (!toolTipActive) JT_show(this.href,this.id,this.alt,tipLeft,tipTop); toolTipActive = true; }, function() { JT_destroy(); toolTipActive =false; } ).click(function(){ return false; }); });
$(’area.jTip’)。click(function(event){event.preventDefault(); return false;});
需要了解更多jQuery教程分享需要在图像映射上禁用单击事件,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享需要在图像映射上禁用单击事件相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981602.html
赞 (0)
jQuery技术:将Google Chart导出到Excel
上一篇
2021年12月12日
c/c++语言开发共享如何帮助gcc矢量化C代码
下一篇
2021年12月12日