JavaScript获得鼠标相对地点程序代码介绍,open关于浏览器拦截难题浅析及减轻办法web前端

By admin in web前端 on 2019年6月25日

一、鼠标进入容器方向的推断

第一区别浏览器中event地方属性的分析:
1.
IE的event.x,event.y是以事件触发成分的父元素外部为仿效点(不包蕴滚动距离)

window.open是javascript函数,该函数的功力是开采三个新窗口或那改动原本的窗口,不过貌似用来的是伸开新窗口,因为修改原本的网页地址,能够有另叁个函数,那正是window.location,他得以重定向网页地址,使网页跳转到另叁个页面。

看清鼠标从哪些方向进入成分容器是多个日常遇到的标题,怎么样来判别呢?

  1. Firefox的event.pageX,event.pageY是以body元素为参照他事他说加以调查点(包涵滚动距离)
  2. event.clientX,event.clientY以浏览器左上角为参考试的场合(不包含滚动距离)
    4.
    IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发成分内界的左上角为参谋点(蕴含滚动距离,当有边框时,可能出现负数)

本人明天要说的是window.open函数的多少个利用政策,一般景象下,假使您平昔在js中调用window.open()函数去开辟贰个新窗口,浏览器会拦截你,以为你将弹出广告等用户不想获取的窗体,所以只要不想让浏览器拦截你,你能够将以此函数改为用户点击时接触,那样浏览器就以为是用户想访问那一个页面,而不是您一直弹出给用户。

先是想到的是:获取鼠标的职位,然后通过一大堆的if..else逻辑来明显。那样的做法相比较麻烦,下面介绍二种比较方便的方法:

下一场是DOM对象中度属性深入分析

据此常用的措施正是在超链接里参加onclick事件,如<a
href=”javascript:void(0)”
onclick=”window.open()”></a>那样用户点击这几个超链接,浏览器会感觉它是张开一个新的链接,所以就不会阻拦。

第一种艺术,利用圆和反正切三角函数

  1. scrollHeight: 获取对象的轮转中度
    2.
    scrollLeft:设置或得到位于对象右侧界和窗口中前段时间可知内容的最左端之间的离开
    3.
    scrollTop:设置或获得位于对象最上部和窗口中可知内容的最上部之间的离开
  2. scrollWidth:获取对象的滚动宽度
  3. offsetHeight:获取对象相对于版面或由父坐标 offsetParent
    属性钦定的父坐标的惊人
  4. offsetLeft:获取对象相对于版面或由 offsetParent
    属性钦定的父坐标的一个钱打二拾陆个结左侧地方
  5. offsetTop:获取对象相对于版面或由 offsetTop
    属性内定的父坐标的揣测顶部地方

可是有的时候候我们会遇到想要弹出三个窗口,可是却是在onckick事件推行后,才去弹出来的,那时就能够被浏览器拦截,大家可以由此上面包车型客车办法来制止,便是先用window.open展开五个窗口,然后修改地址。如var
tempwindow=window.open(‘_blank’);打开几个窗口,然后用tempwindow.location=’

如下图所示:

有了以上分析,写出八个取地点的函数

您大概感兴趣的稿子:

  • JS判别鼠标从怎么着来头进入贰个器皿实例证实
  • JavaScript检验鼠标移动方向的不二等秘书诀
  • 动用JS判定鼠标移入成分的方向
  • javascript鼠标跟随运动3种效应(眼球效应,苹果菜单,方向跟随)
  • JS用斜率决断鼠标进入DIV五个方向的议程
  • js完毕window.open不被阻挡的消除方法汇总
  • window.open不被拦截的贯彻代码
  • ajax乞请成功后新开窗口window.open()被挡住解决办法
  • window.open被浏览器拦截后的自定义提醒功用代码
  • JS剖断鼠标进入容器的大方向与window.open新窗口被阻碍的主题素材

web前端 1

复制代码 代码如下:

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

// 取X轴位置
function mouseX(evt) {
// firefox
if (evt.pageX) return evt.pageX;
// IE
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft);
else return null;
}
// 取Y轴位置
function mouseY(evt) {
// firefox
if (evt.pageY) return evt.pageY;
// IE
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop);
else return null;
}

代码如下:

赢得Html控件的断然地点的两种方法

$(".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对应BLT大切诺基,有一点点不合CSS的习于旧贯。

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert(“x:” + x + “,” + “y:” + y);
}
function getAbsPoint(obj){
var x, y;
oRect = obj.getBoundingClientRect();
x = oRect.left
y = oRect.top
alert(“(” + x + “,” + y + “)”)
}

第二种艺术,利用斜率

注意

正如图所示:

web前端,document.body.scrollLeft,document.body.scrollTop只用于IE6从前的版本,在IE6中,对没有宣布DOCTYPE,也许透露的是transitional
DOCTYPE,那么IE6将应用document.documentElement.scrollLeft
来获得鼠标的相对化地方

web前端 2

您大概感兴趣的稿子:

  • javascript窗口宽高,鼠标地方,滚动中度(详细解析)
  • JS获得鼠标地方(包容多浏览器ie,firefox)脚本之家革新版
  • 基于JavaScript实现获取鼠标点击地点坐标的法子
  • js获取鼠标地点随想附多浏览器兼容代码
  • js获取鼠标地点实例详解
  • js获取鼠标点击的职位完成思路及代码
  • firefox中用javascript完毕鼠标地方的原则性
  • javascript之鼠标拖动地方交流效果代码
  • JavaScript中收获鼠标地点相关属性总括
  • JS决断鼠标进入容器的可行性与window.open新窗口被阻碍的标题
  • JS达成窗口加载时模拟鼠标移动的不二诀要
  • JS获取鼠标地点距浏览器窗口距离的法子言传身教

以浏览器左上角做原点,画坐标轴,向下为负,向右为正,和数学坐标系一致。中间的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,而用自定义事件dispatch伊夫nt触发的轩然大波则不是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窗口宽高,鼠标地点,滚动中度(详细剖析)
  • JS获得鼠标地点(包容多浏览器ie,firefox)脚本之家改正版
  • 基于JavaScript完成获取鼠标点击地点坐标的办法
  • js获取鼠标地点诗歌附多浏览器包容代码
  • js获取鼠标地点实例详解
  • js获取鼠标点击的岗位实现思路及代码
  • JavaScript获得鼠标相对地方程序代码介绍
  • firefox中用javascript实现鼠标地点的固定
  • javascript之鼠标拖动地方交流效果代码
  • JavaScript中获得鼠标地方相关属性计算
  • JS达成窗口加载时模拟鼠标移动的格局
  • JS获取鼠标地方距浏览器窗口距离的法子言传身教

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有