JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题


Posted in Javascript onDecember 23, 2016

一、鼠标进入容器方向的判定

判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?

首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定。这样的做法比较繁琐,下面介绍两种比较方便的方法:

第一种方法,利用圆和反正切三角函数

如下图所示:

JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限。

代码如下:

$(".box").on("mouseenter mouseleave",function(e){

/** 获取容器宽高 **/
var w = $(this).width();
var h = $(this).height();

/** 计算X和Y相对于圆心点的距离,如果不是正方形,按照X,Y谁小按谁进行比例缩放**/
var x = (e.pageX - $(this).offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - $(this).offset().top - (h/2)) * ( h > w ? (w/h) : 1 );

/** 根据X,Y的值,做反正切atan2计算,返回值在[-π,π]之间 ,这里加上180,剔除负值**/
/** 如果不加180,则0,1,2,3对应下左上右**/
/** 除以90并四舍五入,使得可以以45度为分割线,获取象限**/
/** 加3与4取模,将0,1,2,3对应t,r,b,l既上右下左**/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 )+3)%4;
switch(direction) {
 case 0:
 /** 上 **/
 break;
 case 1:
 /** 右 **/
 break;
 case 2:
 /** 下 **/
 break;
 case 3:
 /** 左 **/
 break;
}});

这个方法中的Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 )/90)+3)% 4公式比较难理解,首先得到鼠标坐标经过换算后的值,然后算出该坐标的弧度,接着换算成度数,加180去掉负数,随后转移象限将0123对应TRBL,如果不加180去掉负数,0123对应BLTR,有点不合CSS的习惯。

第二种方法,利用斜率

如下图所示:

JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

以浏览器左上角做原点,画坐标轴,向下为负,向右为正,和数学坐标系一致。中间的div的左上角坐标(x1,y1),右下角坐标(x2,y2),中心点的坐标(cx,cy)。如图两点的斜率为k(k<0),关于x轴对称的斜率为-k。

需要注意一点的是所有的Y轴坐标都是负数,因为就是将容器置于坐标系的第四象限。

$(".box").on("mouseenter mouseleave", function(e) {
 var w = $(this).width();
 h = $(this).height(),
 x1 = $(this).offset().left,
 y1 = -$(this).offset().top,
 x2 = x1 + w,
 y2 = y1 - h,
 cx = (x1 + x2) / 2,
 cy = (y1 + y2) / 2,
 k = (y2 - y1) / (x2 - x1),
 k1 = (-e.pageY - cy) / (e.pageX - cx),
 direction = -1;
 if ((k1 < -k) && (k < k1)) {
 direction = e.pageX > cx?1:3;
 } else {
 direction = -e.pageY > cy?0:2;//大家理解代码的时候一定记住,Y坐标都是负的
 }
 //0123对应TRBL
});

如上代码所示:当鼠标的位置与容器中心点所形成的斜率在(k,-K)之间,必然是左右移入或移出,如果鼠标的X坐标大于中心点CX,则是右边进入,否则为左边进入;若斜率不在(k,-k)之间,则是上下进入或出去,只要判断鼠标的Y坐标与中心点CY的大小关系即可,大于则是下边,相反就是上边。

二、window.open新窗口被拦截的问题

当我们使用window.open()方法打开一个窗口时,部分浏览器会检测是否是用户主动行为,若不是,则会阻止窗口的打开,例如在异步Ajax的回调函数中调用。

新窗口被拦截检测

窗口被阻止打开,如不给出提示,用户体验将会很不好,那如何检测窗口被阻止?

如下代码所示:

var newWin = null,
 isBlock = !1;
/** 新窗口被某些扩展阻止打开,会抛出错误,因此使用try..catch **/
try {
 newWin = window.open('http://www.baidu.com', '_blank');
 /** 新窗口被阻止时,返回值是undefined或null**/
 (!newWin) && (isBlock = !0);
} catch (ex) {
 isBlock = !0;
}
if (isBlock) alert('您阻止了窗口的打开。');

为何新窗口被拦截

浏览器设计者出于安全的考虑,window.open 命令在用户操作(trusted events)时, 才会正常的打开应该页面而不会被浏览器拦截。什么是trusted events?

The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.

当前事件是由用户行为触发(例如鼠标点击按钮触发操作),便是trusted events,而用自定义事件dispatchEvent触发的事件则不是trusted events。

因此使用JS代码自动触发window.open() ,第二个参数不为_self,打开新窗口在大部分浏览器中会被拦截。如果第二个参数为_self,则不会被拦截,如window.open("http://www.baidu.com","_self")

如何Ajax回调中避免被拦截

很多人的需求是点击按钮发送Ajax请求,请求数据回来后,再使用window.open来打开新的窗口,由于是异步操作,直接window.open ,肯定会被拦截。这时我们可以变通以下,先打开一个空窗口,然后等数据回来后替换为需要的地址

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>弹窗拦截测试</title>
 <style type="text/css">
 #btn{ width:100px; height: 30px; line-height: 30px; text-align:center; background-color:#0087dc; transition:all .2s; color:#fff; border-radius:3px;cursor:pointer; }
 #btn:hover{ background-color:#0060b2; }
 </style>
</head>
<body>
 <div id="btn">打开新窗口</div>
 <script type="text/javascript">
 btn.addEventListener('click',(e)=>{
  var xhr = new XMLHttpRequest();
  var newWin = window.open('about:blank');
  xhr.onreadystatechange = ()=>{
  if(xhr.readyState == 4){
   if(xhr.status == 200){
   newWin.location.href="http://www.baidu.com";
   }
  }
  };
  xhr.open('post','/dnslookup',!1);//异步方式
  xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  xhr.send('host=www.baidu.com&rrtype=A');
 },!0);
 </script>
</body>
</html>

服务端代码如下:

var http = require('http'),
 url = require('url'),
 dns = require('dns'),
 qs = require('querystring'),
 fs = require('fs');

function router(req,res,pathname){
 switch(pathname){
 case '/dnslookup':
  lookup(req,res);
  break;
 default:
  showIndex(req,res);
 }
}
function showIndex(req,res){
 var pagePath = __dirname+'/'+'block.html';
 var html = fs.readFileSync(pagePath);
 res.end(html);
}
function lookup(req,res){
 var postData = '';
 req.on('data',function(data){
 postData+=data;
 });
 req.on('end',function(data){
 var json = qs.parse(postData);
 var hostname = json.host;
 var rrtype = json.rrtype;
 dns.resolve(hostname,rrtype,function(err,adresses){
  if(err){
  res.end(JSON.stringify({errcode:1,ips:[]}));
  }
  res.end(JSON.stringify({errcode:0,ips:adresses}));
 });
 
 });
}
http.createServer(function(req,res){
 var pathname = url.parse(req.url).pathname;
 req.setEncoding("utf8");
 res.writeHead(200,{'Content-Type':'text/html'});
 router(req,res,pathname);
}).listen(3000);

如上所示便可解决在Ajax回调中新窗口被拦截的问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
jQuery实现高级检索功能
May 28 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 #Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 #Javascript
Bootstrap select多选下拉框实现代码
Dec 23 #Javascript
Bootstrap select实现下拉框多选效果
Dec 23 #Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 #Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 #Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 #Javascript
You might like
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php微信公众平台开发类实例
2015/04/01 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
春节活动策划方案
2014/01/24 职场文书
素质拓展感言
2014/01/29 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
课外小组活动总结
2014/08/27 职场文书
创先争优个人承诺书
2014/08/30 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
西柏坡导游词
2015/02/05 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
工作建议书范文
2019/07/08 职场文书
SQL Server删除表中的重复数据
2022/05/25 SQL Server
js作用域及作用域链工作引擎
2022/07/07 Javascript