资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/爬虫可视化点选配置工具之获取鼠标点选元素

爬虫可视化点选配置工具之获取鼠标点选元素

leoperfect / 1278人阅读

摘要：类型指定可能被其他元素包含的后代元素。这样页面选择函数就写完了，下面就是引用了，在中添加函数点击以上就完成了页面选择功能

前言 
</>复制代码 
  1. 前面两章已经介绍怎么开发一个chrome插件和怎么使用vue搭建一个弹出框的chrome插件，这一章来实现页面元素选择的功能，效果如下图，鼠标放到元素上，元素会高亮：

主要实现思路，创建一个和页面一样宽高的蒙层，监听蒙层的鼠标移动事件，再使用elementFromPoint函数来获得当前鼠标所在位置的页面元素，具体实现如下：
shelter.js这是主函数

</>复制代码 
  1. import $ from "jquery";
  2. import validateSelect from "./validateSelected";
  3. import isContentElement from "./isContentElement";
  4. //选择遮罩
  5. export default class {
  6.     constructor() {
  7.         this.shelter = $("
    "); //选择过程中的div
  8.         this.shelter.attr("id", "__pAp_SpiderShelter");
  9.         this.block = $("
    ");
  10.         this.lastSelectEl = null; //当前鼠标移动到元素
  11.         this.shelterInterval = null;
  12.         $(document.body).append(this.shelter);
  13.         $(document.body).append(this.block);
  14.     }
  15.     beginSelect(onDomClick, onContextMenu, callback) {
  16.         let that = this;
  17.         this.shelter.css("position", "absolute");
  18.         this.shelter.css("display", "block");
  19.         this.shelter.addClass("pAp_spider_Selecter_Block");
  20.         this.shelter.bind("click", onDomClick);
  21.         this.shelter.show();
  22.         this.shelter.css("width", "100%");
  23.         this.shelter.css("height", $(document).height() + "px");
  24.         this.shelter.css("left", "0");
  25.         this.shelter.css("top", "0");
  26.         this.shelter.mousemove(this.onShelterMouseMove(callback));
  27.         //初始化遮罩
  28.         function initCover() {
  29.             that.shelterInterval = setInterval(function() {
  30.                 //如果遮罩层的高度小于页面高度，则将遮罩的高度设置成页面高度
  31.                 if ($(document).height() > that.shelter.height()) {
  32.                     that.hideCover();
  33.                     that.showCover();
  34.                 }
  35.             }, 500);
  36.         }
  37.         //鼠标移动到遮罩层上的时候，重置遮罩层
  38.         this.shelter.mouseover(function() {
  39.             if (that.shelterInterval) {
  40.                 clearInterval(that.shelterInterval);
  41.                 that.shelterInterval = null;
  42.             }
  43.         }).mouseout(initCover);
  44.         this.block.css("position", "absolute");
  45.         this.block.css("display", "block");
  46.         this.block.show();
  47.         this.showShelter(); //显示遮罩阴影
  48.         this.block.css("z-index", "19891009")
  49.         this.shelter.css("z-index", "19891010");
  50.         //绑定右键事件
  51.         document.oncontextmenu = onContextMenu;
  52.         //鼠标滚动事件，目的是防止页面滚动
  53.         $(this.shelter).on("mousewheel", function(evt) {
  54.             event.stopPropagation();
  55.             event.preventDefault();
  56.             var height = evt.originalEvent.wheelDelta;
  57.             if (!that.lastSelectEl) return;
  58.             var el = that.lastSelectEl.get(0);
  59.             while (el) {
  60.                 if (el.scrollHeight > el.offsetHeight || el.tagName == "BODY") {
  61.                     var lastTop = el.scrollTop;
  62.                     el.scrollTop = el.scrollTop - height;
  63.                     if (lastTop !== el.scrollTop) {
  64.                         break;
  65.                     }
  66.                 }
  67.                 el = el.parentElement;
  68.             }
  69.         });
  70.         initCover();
  71.     };
  72.     endSelect(callback) {
  73.         if (this.shelterInterval) {
  74.             clearInterval(this.shelterInterval);
  75.             this.shelterInterval = null;
  76.         }
  77.         this.shelter.unbind();
  78.         this.shelter.remove();
  79.         this.block.remove();
  80.         $(document).unbind();
  81.         document.oncontextmenu = function() {};
  82.         callback && callback();
  83.     };
  84.     showShelter() {
  85.         this.block.css("box-shadow", "0 0 20px #d4930d");
  86.     };
  87.     hideShelter() {
  88.         this.block.css("box-shadow", "none");
  89.     };
  90.     //鼠标移动时的操作
  91.     onShelterMouseMove(callback) {
  92.         let that = this;
  93.         var position = {
  94.             x: 0,
  95.             y: 0
  96.         };
  97.         return function(e) {
  98.             event.stopPropagation();
  99.             if (Math.abs(position.x - e.pageX) > 10 || Math.abs(position.y - e.pageY) > 10) {
  100.                 //隐藏蒙层
  101.                 that.hideCover();
  102.                 //返回当前鼠标所在位置的最顶层元素，也就是鼠标所在的页面元素
  103.                 var el = $(document.elementFromPoint(e.clientX, e.clientY));
  104.                 //显示蒙层
  105.                 that.showCover();
  106.                 //如果是弹出框或者是遮罩则返回
  107.                 if (!isContentElement(el)) return;
  108.                 //如果元素中有我们生成的属性，则取父元素
  109.                 if (!validateSelect(el)) {
  110.                     el = el.parent();
  111.                 }
  112.                 if (!that.lastSelectEl || that.lastSelectEl.get(0) != el.get(0)) {
  113.                     that.lastSelectEl = el;
  114.                 }
  115.                 position = {
  116.                     x: e.pageX,
  117.                     y: e.pageY
  118.                 };
  119.                 that.setPosition(el, that.block);
  120.                 callback && callback(that.lastSelectEl);
  121.             }
  122.         }
  123.     }
  124.     setShelterPosition(el) {
  125.         this.setPosition(el, this.shelter);
  126.     }
  127.     /**
  128.      * 把选择框设置当当前选择元素的位置
  129.      * @param {Jquery Dom Element} el 选择的元素
  130.      * @param {Jquery Dom Element} shelter 遮罩层
  131.      */
  132.     setPosition(el, shelter) {
  133.         if ((el.width() == 0 || el.height() == 0) && el.get(0).tagName == "A" && el.children().length) {
  134.             that.setPosition(el.children().eq(0), shelter);
  135.             return;
  136.         }
  137.         var paddingObject = {
  138.             left: parseInt(el.css("padding-left")),
  139.             top: parseInt(el.css("padding-top")),
  140.             right: parseInt(el.css("padding-right")),
  141.             bottom: parseInt(el.css("padding-bottom"))
  142.         };
  143.         var _width = 0,
  144.             _height = 0;
  145.         if (!isNaN(paddingObject.left)) {
  146.             _width += paddingObject.left;
  147.         }
  148.         if (!isNaN(paddingObject.right)) {
  149.             _width += paddingObject.right;
  150.         }
  151.         if (!isNaN(paddingObject.top)) {
  152.             _height += paddingObject.top;
  153.         }
  154.         if (!isNaN(paddingObject.bottom)) {
  155.             _height += paddingObject.bottom;
  156.         }
  157.         var top = parseInt(el.offset().top);
  158.         var height = el.height() + _height;
  159.         var availHeight = $(document).height() - top;
  160.         height = height > availHeight ? availHeight : height;
  161.         var obj = {
  162.             "left": parseInt(el.offset().left) + "px",
  163.             "top": top + "px",
  164.             "width": el.width() + _width,
  165.             "height": height
  166.         };
  167.         shelter.css(obj);
  168.     };
  169.     hideCover() {
  170.         this.block.css("z-index", "-2")
  171.         this.shelter.css("z-index", "-1");
  172.         this.shelter.css("display", "none");
  173.         this.block.css("display", "none");
  174.     };
  175.     showCover() {
  176.         this.shelter.css("display", "block");
  177.         this.block.css("display", "block");
  178.         this.block.css("z-index", "19891009")
  179.         this.shelter.css("z-index", "19891010");
  180.         var height = $(document).height();
  181.         this.shelter.css("width", "100%");
  182.         this.shelter.css("height", height + "px");
  183.         this.shelter.css("left", "0");
  184.         this.shelter.css("top", "0");
  185.     };
  186.     setBlockCss(key, value) {
  187.         this.block.css(key, value);
  188.     }
  189.     setShelterCss(key, value) {
  190.         this.shelter.css(key, value);
  191.     }
  192. }

validateSelected.js确保所选择的元素是页面本身的元素

</>复制代码 
  1. import $ from "jquery";
  2. /**
  3.  * 判断是否有我们生成的元素，即被我们标记为选中的元素
  4.  * @param {*} element 
  5.  */
  6. export default function(element) {
  7.     var el = $(element);
  8.     if (el.attr("__pAp_select")) {
  9.         return false;
  10.     }
  11.     if (el.hasClass("__pAp_selectrow")) {
  12.         return false;
  13.     }
  14.     return true;
  15. };

isContentElement.js这个函数的作用也是确保所选择的的元素是页面自有的元素

</>复制代码 
  1. import $ from "jquery";
  2. /*
  3.     判断是否内容元素，也就是判断是不是我们的弹出框或者是遮罩
  4. */
  5. export default function(element) {
  6.     var expectClasses = [".layuiex", ".layuiex-layer", ".layuiex-layer-shade", ".layuiex-layer-moves", ".pAp_spider_Selecter_Block"];
  7.     for (var _i = 0; _i < expectClasses.length; _i++) {
  8.         var els = $(expectClasses[_i]);
  9.         for (var a = 0; a < els.length; a++) {
  10.             //$.contains( container, contained )
  11.             //检测一个元素包含在另一个元素之内
  12.             //container    Element类型 指定可能包含其他元素的祖辈容器元素。
  13.             //contained    Element类型 指定可能被其他元素包含的后代元素。
  14.             if ($.contains(els.eq(a).get(0), element) || els.eq(a).get(0) == element) {
  15.                 return false;
  16.             }
  17.         }
  18.     }
  19.     return true;
  20. };

这样页面选择函数就写完了，下面就是引用了，在main.js中添加函数

</>复制代码 
  1. import Vue from "vue";
  2. import $ from "jquery";
  3. import "./layer/layer.css";
  4. import layer from "./layer/layer";
  5. import shelter from "./js/selector/shelter";
  6. Vue.config.productionTip = false;
  7. let shelterUi = new shelter();
  8. ......
  9. new Vue({
  10.     el: "#__paApa_container",
  11.     components: {},
  12.     data() {
  13.         return {
  14.             selectedEl: null
  15.         };
  16.     },
  17.     mounted() {
  18.         let that = this;
  19.         shelterUi.beginSelect(that.onDomClick, null,
  20.             function(selectedEl) {
  21.                 that.selectedEl = selectedEl;
  22.             });
  23.     },
  24.     methods: {
  25.         onDomClick() {
  26.             console.log("点击");
  27.         }
  28.     }
  29. });

以上就完成了页面选择功能

云服务器 GPU云服务器 点选 获取鼠标坐标 获取元素 获取同级元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98543.html

相关文章

  • 可视化爬虫配置chrome插件开发之搭建vue开发环境

    摘要：使用开发插件的好处本次开发的插件是抓取配置插件，有很多的表单以及弹出层，如果纯使用的话会有很多动态创建的操作。使用和的语法以及的加载器相配合，可以减少大量动态创建的代码。 使用vue开发chrome插件的好处 本次开发的插件是抓取配置插件，有很多的form表单以及弹出层，如果纯使用js的话会有很多动态创建dom的操作。使用vue和ES6的import语法以及webpack的html加载...

    impig33 评论0 收藏0

  • 爬虫可视化点选配置工具之chrome插件简介

    摘要：从右上角菜单更多工具扩展程序可以进入插件管理页面，也可以直接在地址栏输入访问。其中，个是必不可少的，和是推荐的。 什么是Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包. 开发与调试 Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即...

    RiverLi 评论0 收藏0

  • 精读《Tableau 入门》

    摘要：可以看到，遥遥领先的城市有三个，加州是销售之王。将再拖拽到，并右键将其粒度改为月。从上图可以看到，指定了个分类，最右上角加州就是最突出的一组，整个聚类只有它一个元素，而画面偏左下角的也是一类，这些是业绩较差的一组数据。 1. 引言 引用著名瑞典统计学家 Hans Rosling 的一句话：想法来源于数字、信息，再到理解。 分析数据的最好方式是可视化，因为可视化承载的信息密度更高，甚至可...

    svtter 评论0 收藏0

  • 新闻爬虫倒腾笔记

    摘要：新闻爬虫在列表页获取列表和时间材料，开发人员工具，插件，，安装包使用开发人员工具分析网站右键或打开，刷新载入打开页签，点选第二排的小漏斗，点入页面，因为新闻都有被检索到的需要，所以一般情况下都可以在第一个文档中找到需要的信息。 新闻爬虫1.0 在列表页获取列表和时间 材料：Pycharm，Chrome开发人员工具，infoLite插件，bs4，request 安装包 pip insta...

    April 评论0 收藏0

  • 18 章 CSS 链接、光标、 DHTML 、缩放

    摘要：宋体中链接的使用宋体中光标的使用宋体中宋体的使用宋体中缩放的使用宋体中链接的使用超链接伪类属性宋体表示该超链接文字尚未被点选宋体表示该超链接文字已被点选过宋体表示该超链接文字正被点选宋体但未被放开宋体表示当鼠标停留1.CSS 中链接的使用 2.CSS 中光标的使用 3.CSS 中 DHTML 的使用 4.CSS 中缩放的使用 1 18 8. .1 1 S CSS  中 链接的使用 超链接伪类...

    tainzhi 评论0 收藏0

发表评论

登陆后可评论

0条评论

leoperfect

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<