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

问题描述

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

前端代码如下:

@model IEnumerable<Models.Company>
@{
ViewBag.Title = "Companies";
Layout = null;
}
<table class="table">
<tr>
<th>
公司名称
</th>
<th>
公司地址
</th>
<th class="Recruitmenttitle" style="color: green; width: 20%; height: 30px;">
操作
</th>
</tr> @if (Model != null && Model.Count() > )
{
foreach (var item in Model)
{
<tr>
<td>
<a href="@Url.Action("RecruitmentDetails", "Recruitment", new { recruitmentid = item.CompanyID })" target="_blank">@item.CompanyName</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.CompanyAddress)
</td>
<td>
<a href="/Test/Edit?companyID=@item.CompanyID" class="btnEdit" data-target="#edit_@item.CompanyID">编辑</a>
@Html.ActionLink("删除", "", new { id = item.CompanyID })
</td>
</tr>
<tr>
<td colspan="" style="display:none;" id="edit_@item.CompanyID">
&nbsp;
</td>
</tr>
}
}
</table>
<script>
$(document).ready(function () {
$("table").on("click", ".btnEdit", function (e) {
var editDiv = $(this).data("target");
$(editDiv).submit(function () {
var $form = $(this).find("form");
var $this = $(this);
$.post($form.attr("action"), $form.serialize(), function (data) {
if (data.status == "") {
$this.css("display", "none").html();
} else {
$this.css("display", "block").html(data);
}
});
return false;
}); $.get($(this).attr("href"), function (data) {
$(editDiv).css("display", "block").html(data);
});
return false;
});
});
</script>

后台很简单:

public ActionResult Edit(string companyID)
{
if (companyID == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Company company = Company.Companies.Find(c => c.CompanyID == Guid.Parse(companyID));
if (company == null)
{
return HttpNotFound();
} if (Request.IsAjaxRequest())
{
return PartialView(company);
}
return View(company);
}

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

问题分析

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

中键点击:

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

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

问题解决

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("a").click(function () {
return false;
});
});
</script>
</head>
<body>
<div class="normal">
<a href="http://www.baidu.com">Go</a>
</div>
</body>
</html>

测试效果截图:

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

我们就来试下,加上mousedown事件(当然click也是它的一种):

$(document).ready(function () {
$("a").on("click mousedown", function () {
return false;
});
});

还是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的建议,最终解决了此问题。方案如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("a").on("click", function () {
return false;
});
});
</script>
</head>
<body>
<div class="normal">
<a href="http://www.baidu.com"><span>Go</span></a>
</div>
</body>
</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. Remote Desktop manager 连接后无法自动登录

    现象: Remote Desktop manager 连接后无法自动登录 用Windows 自带的远程桌面 可以自动登录 解决方法: 在指定站点 右键 Edit Entry. 如下图处打勾就可以了.

  2. linux下如何导入导出MySQL数据库

    一.导出:用mysqldump命令行命令格式mysqldump -u 用户名 -p 数据库名 > 数据库名.sql范例:mysqldump -u root -p abc > abc.sql ...

  3. PHP的反射机制(转)

    介绍: PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse-engineer class, interface,function,method and exte ...

  4. DelayedOperationPurgatory之DelayedOperation pool

    purgatory就是炼狱的意思. 当一个DelayedOperation需要被delay时,它就被放到DelayedOperationPurgatory,相当于进行一个等待池.上一篇blog提到过, ...

  5. centos telnet --xinetd 服务

    telnet由于是明文传输,所以安全起见最好不要用telnet服务.但是由于telnet是一个比较方便的远程工具,在windows上是自带 的不需要安装客户端即可使用.如果telnet设置的比较复杂, ...

  6. SDUT图结构练习——最小生成树

    http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2144&cid=1186 这道题一开始是用prim算法做的,一直错一直错,后来问了帅郭改用 ...

  7. 纯互联网项目“失宠”乐博资本杨宁称今后只投O2O

    从去年开始,我们接下来会进入全新的时代,就是智能一切的时代!过去的互联网都在电脑里,都在服务器里,包括现在移动云也是,大数据都是在服务器里面,真正我们身边的东西,智能含量是非常低的.包括你家洗衣机.冰 ...

  8. DP:LCS(最长公共子串、最长公共子序列)

    1. 两者区别 约定:在本文中用 LCStr 表示最长公共子串(Longest Common Substring),LCSeq 表示最长公共子序列(Longest Common Subsequence ...

  9. lintcode 中等题:Simplify Path 简化路径

    题目 简化路径 给定一个文档(Unix-style)的完全路径,请进行路径简化. 样例 "/home/", => "/home" "/a/./b ...

  10. Java学习笔记之:Java引用数据类型之字符串

    一.简介 字符串广泛应用在Java编程中,在Java中字符串属于对象,Java提供了String类来创建和操作字符串. 创建字符串最简单的方式如下: String greeting = "H ...