How to stop user to redirecting to another page while click on my tab

JavaScript
1

how I can stop click - it should not be redirect to another page, I tried to use pointer-events:none but it is stopping my hover, my hover should display, but I need to stop user to redirecting to another page.

<div name="jobOwner_InnerPanel" id="jobOwner_InnerPanel" data-complex="true" class="  tooltipPnl " style="">
	<a href="javascript:;" id="jobOwnerComdLink2" class=" undefined" ng-click="updatedNextPage($event, 'manageJob', 'POST', layoutObject['pageName'], '', 'false', 'false', '' , 'jobOwnerComdLink2','landingPageModel', '-1','',undefined,'undefined')" style=" ">
		<span class="jobOwnerImg " title=""></span>
	</a>
	<div name="jobOwnertooltipPanel" id="jobOwnertooltipPanel" data-complex="true" class="  tooltip  tooltip-content " style="">
		<span class=" " style=" "><label id="label_1" class="">you are not authorised</label></span>
	</div>
</div>



#landingAdminPnl > .tooltipPnl:hover .talextooltip-content{
	margin-top:-12%
}

.tooltipPnl{ border:0px solid #000; display:block;}

.talextooltip {
	display:none;
}

.tooltipPnl:hover .tooltip {
	 display: block;
}

#landingAdminPnl > .tooltipPnl:hover .tooltip-content {
    left: 30%;
}
#jobOwnerPanel2 > .tooltipPnl:hover .tooltip-content {
    left: 43%;
}

.tooltipPnl:hover .tooltip-content {
	position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    height: 85px;
    max-width: 300px;
}
.tooltip-content:after, .tooltip-content:before {
	right: 100%;
	top: 56%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tooltip-content:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #88b7d5;
	border-width: 22px;
	margin-top: -25px;
}
.tooltip-content:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #c2e1f5;
	border-width: 28px;
	margin-top: -31px;
}
 .tooltipPnl:hover .tooltip-content label{
     position: absolute;
    text-align: center;
    width: 100%;
    left: 0;
    padding: 25px;
    font-size: 18px;
    color: #fff;
 }

 
 .jobOwnerImg{
	display:block;
	width:198px;
	height:73px;
	background: url(../../images/Job-Owner.png) no-repeat;
	cursor:pointer;
    margin: 10px 0px;
     -webkit-transform: perspective(1px) translateZ(0);
  	transform: perspective(1px) translateZ(0);
  	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-property: transform;
  	transition-property: transform;
  	-webkit-border-radius: 10em;
  	float:left;
}

Thanks…

2

Hi @shahzadsiddiqui8, the ng-click attribute suggests that this is an angularJS app, so the click behaviour is already being handled by JS; I don’t really see a way to prevent this from “outside” that app.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.