最近在做asp.net mvc项目时遇到一个关于超链接的问题。很是纠结。

问题描述

有一个公司列表展示页。在用鼠标中键（注意了是滚轮）以下简称中键，点击编辑(超链接)的时候在该条数据的下面直接加在一个编辑的局部视图，功能截图如下：

前端代码如下：

  1. @model IEnumerable<Models.Company>
  2. @{
  3.     ViewBag.Title = "Companies";
  4.     Layout = null;
  5. }
  6. <table class="table">
  7.     <tr>
  8.         <th>
  9.             公司名称
  10.         </th>
  11.         <th>
  12.             公司地址
  13.         </th>
  14.         <th class="Recruitmenttitle" style="color: green; width: 20%; height: 30px;">
  15.             操作
  16.         </th>
  17.     </tr>
  18.  
  19.     @if (Model != null && Model.Count() > )
  20.     {
  21.         foreach (var item in Model)
  22.         {
  23.             <tr>
  24.                 <td>
  25.                     <a href="@Url.Action("RecruitmentDetails", "Recruitment", new { recruitmentid = item.CompanyID })" target="_blank">@item.CompanyName</a>
  26.                 </td>
  27.                 <td>
  28.                     @Html.DisplayFor(modelItem => item.CompanyAddress)
  29.                 </td>
  30.                 <td>
  31.                     <a href="/Test/Edit?companyID=@item.CompanyID" class="btnEdit" data-target="#edit_@item.CompanyID">编辑</a>
  32.                     @Html.ActionLink("删除", "", new { id = item.CompanyID })
  33.                 </td>
  34.             </tr>
  35.             <tr>
  36.                 <td colspan="" style="display:none;" id="edit_@item.CompanyID">
  37.                     &nbsp;
  38.                 </td>
  39.             </tr>
  40.         }
  41.     }
  42. </table>
  43. <script>
  44.     $(document).ready(function () {
  45.         $("table").on("click", ".btnEdit", function (e) {
  46.             var editDiv = $(this).data("target");
  47.             $(editDiv).submit(function () {
  48.                 var $form = $(this).find("form");
  49.                 var $this = $(this);
  50.                 $.post($form.attr("action"), $form.serialize(), function (data) {
  51.                     if (data.status == "") {
  52.                         $this.css("display", "none").html();
  53.                     } else {
  54.                         $this.css("display", "block").html(data);
  55.                     }
  56.                 });
  57.                 return false;
  58.             });
  59.  
  60.             $.get($(this).attr("href"), function (data) {
  61.                 $(editDiv).css("display", "block").html(data);
  62.             });
  63.             return false;
  64.         });
  65.     });
  66. </script>

后台很简单：

  1. public ActionResult Edit(string companyID)
  2. {
  3.     if (companyID == null)
  4.     {
  5.         return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
  6.     }
  7.     Company company = Company.Companies.Find(c => c.CompanyID == Guid.Parse(companyID));
  8.     if (company == null)
  9.     {
  10.         return HttpNotFound();
  11.     }
  12.  
  13.     if (Request.IsAjaxRequest())
  14.     {
  15.         return PartialView(company);
  16.     }
  17.     return View(company);
  18. }

老调重弹，无非是根据不同类型的请求返回不同的视图。这一切似乎都没有什么问题，但是在ie11下当你试着点击鼠标中键（这里指的是我的滚轮，本人用的是低端鼠标没有真正意义上的单击中键）的时候，奇迹出现了：它会以导航链接的方式重新打开直接打开编辑页局部视图：

问题分析

这一看，想都不用想，中键点击的时候肯定发送的不是ajax请求，因为Request.IsAjaxRequest()判断的实质就是检查消息头部的"X-Requested-With"是否是XMLHttpRequest来检查请求是否为ajax请求。在正常点击按钮后，调试即可证明这一点：

中键点击：

当然想要证明这一点不必这么麻烦，用ie捕获一下请求就知道了：

其实分析了这么久了，这只是表明当点击中键的时候，会导致一个导航请求而非我们想看到的ajax请求。

问题解决

这上面分析了这么多，其实是徒劳的。因为我第一下看到这个问题，会以为这个跟a标签没啥关系。其实这个是a标签在IE11（因为我这边IE11下其它地方我没测试过）下，

当用鼠标中键点击a标签时候都会出现这个问题，也就是说这个问题其实是IE11下无法阻止鼠标中键的默认行为。一小段代码测试以下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  5.     <title>效果测试</title>
  6.     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  7.     <script>
  8.         $(document).ready(function () {
  9.             $("a").click(function () {
  10.                 return false;
  11.             });
  12.         });
  13.     </script>
  14. </head>
  15. <body>
  16.     <div class="normal">
  17.         <a href="http://www.baidu.com">Go</a>
  18.     </div>
  19. </body>
  20. </html>

测试效果截图：

看到这儿，有人可能要问了：你可以在mousedown事件里面做些手脚看下？

我们就来试下，加上mousedown事件（当然click也是它的一种）：

  1. $(document).ready(function () {
  2.     $("a").on("click mousedown", function () {
  3.         return false;
  4.     });
  5. });

还是game over了。效果和上面的一样。

但是很奇怪的是：当我在return false之前加行alert("");居然又是可以的了。有点不明觉厉了(注1)。

另一个不是很好的办法的办法：

当然实现partview的这个功能，可以不使用a标签而改用按钮，到目前为止，我确实没有找到一个很完美的解决办法。其实就是要阻止默认行为。当然这只是说的我，Maybe you have?

未完待续

其实问题并没有真正意义上的解决，博问高分悬赏：http://q.cnblogs.com/q/69623/

众神提供的意见

在此感谢各位热情的意见

如EtherDream说言，暂时用唯有采用<a href="javascript:void(0)">Go</a>这样的办法。

结贴

根据DiQiSoft.Com的建议,最终解决了此问题。方案如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  5.     <title>效果测试</title>
  6.     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  7.     <script>
  8.         $(document).ready(function () {
  9.             $("a").on("click", function () {
  10.                 return false;
  11.             });
  12.         });
  13.     </script>
  14. </head>
  15. <body>
  16.     <div class="normal">
  17.         <a href="http://www.baidu.com"><span>Go</span></a>
  18.     </div>
  19. </body>
  20. </html>

就是在a标签之间加上<span></span>标签。具体的解释可以看#22楼linkFly 的回复截图如下：

正如linkFly 所言，这个是“治标不治本”的，但是也是十分巧妙的办法。

在此对各位标示感谢！

 注1：

之所以在return false之前加上alert("")会看到“默认行为被阻止”的假相，是由于它阻塞了后续代码的执行，而并非真正意义上阻止了默认行为。

众神看过来：IE11下鼠标中键（滚轮）导致的一个似乎无法解决的问题？！的更多相关文章

  1. 远程控制Windows2003下安装Pcanywhere导致Awgina.dll出错的解决办法

    远程控制的时候出现的问题引用 症状启动计算机时,"欢迎使用 Windows"登录屏幕不出现.您还可能会看到与下面的某条信息类似的错误信息: ? 一个最近安装的程序使欢迎屏幕和快速用 ...

  2. IE浏览器下ajax缓存导致数据不更新的解决方法

    摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,I ...

  3. Linux系统下inode满了导致无法写文件的解决思路

    解决思路1:删除无用的临时文件,释放inode 进入/tmp目录,执行find -exec命令 find  /tmp  -type  f  -exec  rm  {}  \; 遍历寻找0字节的文件,并 ...

  4. [Bug]IE11下，forms认证，出现无法保存cookie的问题

    目录 ie11 解决方案 ie11 在ie11下,访问服务器上的网站地址,莫名其妙的多出一串东西,这一串字符串是由于客户端禁用cookie造成sessionid无法写入cookie,所以就拼在url上 ...

  5. ElementUI在IE11下兼容性修改

    1.在项目里面使用了axios.js来发送http请求,在IE下报错Promise未定义,解决办法: 到http://bluebirdjs.com/docs/getting-started.html  ...

  6. ubuntu14.04下直接修改apache2默认目录导致wordpress样式改变的解决办法

    一开始看到网上有各种各样的解决方法: 第一种是直接将 sites-available目录下的000-default.conf中的下列代码: DocumentRoot /var/www/html 修改为 ...

  7. IE10,IE11下cookie无法写入问题

    asp.net 4.0的程序,发布后,测试在ie6,ie7,ie8,ie9下均可以正常登录,但是在ie10,ie11下就是无法保存cookie,排查了一下是否ie10,ie11是否存在设置问题发下并不 ...

  8. IE11下ASP.NET Forms身份认证无法保存Cookie的问题

    IE11下ASP.NET Forms身份认证无法保存Cookie的问题 折腾了三四天,今天才找到资料,解决了. 以下会转贴,还没来得及深究,先放着,有空再学习下. ASP.NET中使用Forms身份认 ...

  9. IE8下的项目在IE11下某些功能无法实现的问题

    在IE8和IE11 下获取数据的时间进行判断有些不同,也要根据浏览器的版本判断分别实现 $(".btndelete").children().children().click(fu ...

随机推荐

  1. cf 363A B C

    A水题 ~~  注意0输出 /************************************************************************* > Author ...

  2. Implicitly Typed Local Variables

    Implicitly Typed Local Variables It happens time and time again: I’ll be at a game jam, mentoring st ...

  3. linux系统清空文件内容

    本文转载至:http://www.jbxue.com/LINUXjishu/14410.html 本文介绍下,在linux系统中,清空文件内容的方法,使用cat命令.echo命令,将文件内容截断为0字 ...

  4. nginx模块开发（18）—日志分析

    1.日志简介 nginx日志主要有两种:访问日志和错误日志.访问日志主要记录客户端访问nginx的每一个请求,格式可以自定义:错误日志主要记录客户端访问nginx出错时的日志,格式不支持自定义.两种日 ...

  5. java基础知识回顾之java Thread类学习（五）--java多线程安全问题（锁）同步的前提

    这里举个例子讲解,同步synchronized在什么地方加,以及同步的前提: * 1.必须要有两个以上的线程,才需要同步. * 2.必须是多个线程使用同一个锁. * 3.必须保证同步中只能有一个线程在 ...

  6. ASP.NET MVC 3 初认知

    什么是ASP.NET MVC 1. asp.net mvc 是微软官方提供的mvc模式编写asp.net web应用程序的框架. 2. 是微软既asp.net webForm 后的又一种开放方式,而非 ...

  7. POJ1182 食物链

    并查集经典题1. 向量的思考模式2. 再计算向量时,要画图:有一个关系一开始写错了3. 本人的norm函数一开始x >= 3写成了 x>3,应该对这种小函数多做UT(口头上的,比如)4. ...

  8. sudo和su

    su命令就是切换用户的工具 sudo 授权许可使用的su,也是受限制的su 1. sudo 的适用条件 由于su 对切换到超级权限用户root后,权限的无限制性,所以su并不能担任多个管理员所管理的系 ...

  9. 深度分析Java的ClassLoader机制（源码级别）

    写在前面:Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的,类装载器所做的工作实质是把类文件从硬盘读取到内存中,JVM在加载类的时候,都是通过ClassLoa ...

  10. 转response.sendRedirect()与request.getRequestDispatcher().forward()区别

    JSP中response.sendRedirect()与request.getRequestDispatcher().forward(request,response)这两个对象都可以使页面跳转,但是 ...