How do you stop an hotspot EventListener from triggering by just clicking within a pano?
I have a hotspot that triggers and EventListener for a function in an app, within a browser object. There are four hotspots in the pano. Three of the hotspots link to other web sites. The fourth triggers the javascript and a function that is sent and handled by the app. The function just presents some text in another field of the app. After the first time it is triggered by the hotspot, it can be retriggered just by navigating with the pano. It should only be triggered when the user clicks the specific hotspot.
Here’s my code from the specific hot spot:
Code: Select all
this.__div.onmousedown=function (e) {
document.addEventListener('click', function() {liveCode.myLiveCodeHandler();});
me.skin.hotspotProxyClick(me.hotspot.id);
I am not sure why it is behaving like this?
I have tried to add a removeEventListener command even used a mouseUp trigger, thinking maybe if I use MouseDown the AddEventListener and mouseup up the removeEventListener I could get it to work. No dice. Anytime I try to use the removeEventListener the pano loads with no hotspots.
Here is the whole javascript for the hotspot in question:
Code: Select all
} else
if (hotspot.skinid=='eye')
{
this.__div=document.createElement('div');
this.__div.ggId="eye";
this.__div.ggParameter={ rx:0,ry:0,a:0,sx:1,sy:1 };
this.__div.ggVisible=true;
this.__div.className='ggskin ggskin_hotspot ';
this.__div.ggType='hotspot';
hs ='';
hs+='height : 5px;';
hs+='left : 282px;';
hs+='position : absolute;';
hs+='top : 175px;';
hs+='visibility : inherit;';
hs+='width : 5px;';
this.__div.setAttribute('style',hs);
this.__div.style[domTransform + 'Origin']='50% 50%';
me.__div.ggIsActive=function() {
return me.player.getCurrentNode()==this.ggElementNodeId();
}
me.__div.ggElementNodeId=function() {
return me.hotspot.url.substr(1, me.hotspot.url.length - 2);
}
this.__div.onmousedown=function (e) {
document.addEventListener('click', function() {liveCode.myLiveCodeHandler();});
me.skin.hotspotProxyClick(me.hotspot.id);
}
this.__div.onmouseover=function (e) {
me.player.setActiveHotspot(me.hotspot);
me.skin.hotspotProxyOver(me.hotspot.id);
}
//hotspot.eye.onmouseup=function (e) {
this.__div.onmouseup=function (e) {
removeEventListener('click', function() {liveCode.myLiveCodeHandler();});
me.skin.hotspotProxyClick(me.hotspot.id);
}
this.__div.onmouseout=function (e) {
me.player.setActiveHotspot(null);
me.skin.hotspotProxyOut(me.hotspot.id);
}
this.__div.ggUpdatePosition=function (useTransition) {
}
this._svg_4=document.createElement('div');
this._svg_4__img=document.createElement('img');
this._svg_4__img.className='ggskin ggskin_svg';
this._svg_4__img.setAttribute('src',basePath + 'images/svg_4.svg');
this._svg_4__img.setAttribute('style','position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;-webkit-user-drag:none;pointer-events:none;');
this._svg_4__img['ondragstart']=function() { return false; };
this._svg_4.appendChild(this._svg_4__img);
this._svg_4.ggId="Svg 4";
this._svg_4.ggParameter={ rx:0,ry:0,a:0,sx:1,sy:1 };
this._svg_4.ggVisible=true;
this._svg_4.className='ggskin ggskin_svg ';
this._svg_4.ggType='svg';
hs ='';
hs+='height : 48px;';
hs+='left : -24px;';
hs+='position : absolute;';
hs+='top : -24px;';
hs+='visibility : inherit;';
hs+='width : 48px;';
this._svg_4.setAttribute('style',hs);
this._svg_4.style[domTransform + 'Origin']='50% 50%';
me._svg_4.ggIsActive=function() {
if ((this.parentNode) && (this.parentNode.ggIsActive)) {
return this.parentNode.ggIsActive();
}
return false;
}
me._svg_4.ggElementNodeId=function() {
if ((this.parentNode) && (this.parentNode.ggElementNodeId)) {
return this.parentNode.ggElementNodeId();
}
return me.ggNodeId;
}
this._svg_4.ggUpdatePosition=function (useTransition) {
}
this.__div.appendChild(this._svg_4);
}
};
this.addSkinHotspot=function(hotspot) {
return new SkinHotspotClass(me,hotspot);
}
this.addSkin();
};
John Patten
SUSD