曲径通幽拦截a标签的跳转

最新推荐文章于 2024-02-29 11:15:15 发布

lmdcszh

最新推荐文章于 2024-02-29 11:15:15 发布

阅读量5.3k

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/lmdcszh/article/details/22604295

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在一些项目中经常会遇到拦截a标签的默认弹框的情况。最近的项目中有这样的需求，只有界面中的输入合法后，点击某个a标签才会转向到后台的action，然后弹出某个jsp。

一、需求：

具体的需求见下面的界面：

只有当选择了课程、考试，并计算了分值分布后，点击添加按钮（实质是a标签）才弹出该课程下相关联的题型，如下图：

二、解决思路：

1、使用js拦截a标签的默认弹框行为。

应该说这是最直接也是一般人最先想到的方法，于是从网上找了不少资料，进行了各种尝试。可能是dwz框架的原因，总是拦截失败。

<html>
  <head>
    <script type="text/javascript">
      function notRun(){
        My_function();
        return false;
      }
    </script>
  </head>
  <body>
    <a href="" οnclick="return notRun();">点我不会跳转</a>
  </body>
</html>

大概的思路是单击a标签的时候，处罚onclick事件，如果该事件返回false ，那么会阻止a标签的默认行为，类似阻止form表单的自动提交。

如果在单击时候还有一些其他的函数要执行，那么可以做如下的修改：

<html>
  <head>
    <script type="text/javascript">
      function My_function(address){
        //do anyting you want
        //执行完需要的功能再将页面跳转到href中指定的链接
        window.location.href=address;
      }
      //notRun函数用于接收超链接地址并将其传入需要执行的函数My_function之中，再返回false将默认行为清除
      function notRun(address){
        My_function(address); //向自定义函数传值
        return false;  //清除默认行为
      }
    </script>
  </head>
  <body>
    <!--在超链接中添加onclick事件并将超链接地址传入notRun函数-->
    <a href="yourLinkAddress" οnclick="return notRun(this);">点我不会跳转</a>
  </body>
</html>

另外，关于a标签的一些属性，也顺便查了些资料：

1.链接的onclick 事件被先执行，其次是href属性下的动作（页面跳转，或 javascript 伪链接）；
2.假设链接中同时存在href 与onclick，如果想让href 属性下的动作不执行，onclick 必须得到一个false的返回值；
3.如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动；
4.如果在链接的 href属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替。

关于="javascript:void(0)的一点说明：

在Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。void(0) 计算为 0，但 Javascript 上没有任何效果。

在这里，javascript:void(0),没启实质上的作用，它仅仅是一个死链接，执行的函数是subgo()。

<a href="#" οnclick="subgo()">点我</a>与<a href="javascript:void(0)" οnclick="subgo()">点我</a>区别。

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端，而javascript:void(0) 仅仅表示一个死链接，没有任何信息。所以调用脚本的时候最好用void(0)

下面是基于事件的实现思路：

function stopDefault(e)
{      
     var oEvent=e || event;
     if(oEvent && oEvent.preventDefault)
     {         
        oEvent.preventDefault();     
     }
     else
     {         
        window.event.returnValue = false;             
     }
     return false; 
}



window.onload = function()
{
  var aTable = document.getElementsByTagName("a");
        
  for (var i=0; i<aTable.length; i++ )
  {
    aTable[i].onclick = function(event)
    { 
        alert("title:"+this.innerHMLT+",href:"+this.href);  
        stopDefault(event)
    }
  }
}

思路一总结：

链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接），如果不想让href 属性下的动作执行，onclick 需要要返回 false ，一般是这样写οnclick="xxx();return false;"。

2、使用js动态隐藏、显示a标签。

尝试了上面的方法后，都解决不了问题。这个思路则跳出了a标签的局限，从另一个层面解决了跳转问题。

按照上面的思路的a标签：

<li>
<a class="add" name="bindTitle"	href="${contextPath }/template/showAddTemplateTwoAction.action"	οnclick=" return bindExam();" target="dialog" mask="true"><span>添加</span></a>				
</li>

对比，现在的a标签：

<li id="divadd" style="width: 0px;">
  <a id="add" class="add" href="javascript:void(0);" target="dialog" mask="true"></a>
</li>

隐藏或显示a标签的js代码：

<script type="text/javascript">
  		
//自定义trim函数
String.prototype.trim = function() {
	    var str = this,
	    whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
	    for (var i = 0,len = str.length; i < len; i++) {
	      if (whitespace.indexOf(str.charAt(i)) === -1) {
	        str = str.substring(i);
	        break;
	      }
	    }
	    for (i = str.length - 1; i >= 0; i--) {
	      if (whitespace.indexOf(str.charAt(i)) === -1) {
	        str = str.substring(0, i + 1);
	        break;
	      }
	    }
	    return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
	  }
  	
	function initHtml() {		
		var degreeOneScoreCal = document.getElementById("degreeOneScoreCalCustom").value;
			var degreeTwoScoreCal = document.getElementById("degreeTwoScoreCalCustom").value;
			var degreeThreeScoreCal = document	.getElementById("degreeThreeScoreCalCustom").value;
			
			var courseId = document.getElementById("template_add_combox_course").value;		
			var fullScore = document.getElementById("fullScoreCustom").value;
			var hopeScore = document.getElementById("hopeScoreCustom").value;
			var templateName = document.getElementById("templateNameCustom").value;				
		
		var add = document.getElementById("add");
		var exam = document.getElementById("template_add_combox_exam");
		var examId = exam.options[exam.selectedIndex].value;
		
		if (courseId == null || courseId.trim() == "" ||examId == null || examId.trim() == "" || fullScore == null || fullScore.trim() == "" || hopeScore == null || hopeScore.trim() == "" ||   templateName == null || templateName.trim() == ""  )
			{
			document.getElementById("divadd").style.width = "0px";				
			return;
			}
		if (degreeOneScoreCal == null || degreeOneScoreCal.trim() == "" ||degreeTwoScoreCal == null || degreeTwoScoreCal.trim() == "" || degreeThreeScoreCal == null || degreeThreeScoreCal.trim() == "" )
		{
			document.getElementById("divadd").style.width = "0px";				
			return;
		}
	
		document.getElementById("divadd").style.width = "55px";

		add. href="${contextPath }/template/showAddTemplateTwoAction.action?examId=" + examId + "&courseId=" + courseId
		+ "&fullScore=" + fullScore + "&hopeScore=" + hopeScore
		+ "&templateName=" + encodeURI(encodeURI(templateName))
		+ "°reeOneScoreCal=" + degreeOneScoreCal
		+ "°reeTwoScoreCal=" + degreeTwoScoreCal
		+ "°reeThreeScoreCal=" + degreeThreeScoreCal;	 
		
		add.innerHTML="<span>添加</span>";	
		
	}

	new function() {
		initHtml();
	}
</script>

因为界面中模板名、总分、期望分等文本框也需要有相应的数据，那么需要在这些html标签的一些相关事件中注册这个函数文本框失去焦点的时候nblur="initHtml();" 下拉框的οnchange="initHtml();"。

这样如果界面中输入不合法，就不会出现天价按钮，就不会引起用户的错误操作：

三、总结：

技术都是死的，不管学习多少，最重要的是会使用这些技术区解决问题；

很多时候一个问题可以通过多个途径来解决，不断在项目中历练，不断的娴熟技术，更重要的的扩宽解决问题的思路。

曲径通幽，是解决问题的一种好思路，其实不只是在解决的问题中，在生活的方方面面都是一种哲学。用生活的艺术，来编程，站在一定的高度看待问题，解决问题。

lmdcszh

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
14
评论
曲径通幽拦截a标签的跳转

在一些项目中经常会遇到拦截a标签的默认弹框的情况。最近的项目中有这样的需求，只有界面中的输入合法后，点击某个a标签才会转向到后台的action，然后弹出某个jsp。一、需求：具体的需求见下面的界面：只有当选择了课程、考试，并计算了分值分布后，点击添加按钮（实质是a标签）才弹出该课程下相关联的题型，如下图：二、解决思路：1、使用js拦截a标签的默认
复制链接

扫一扫