☰

Select text inside a link like Opera

Disable link dragging and select text.

目前为 2019-06-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Select text inside a link like Opera
  3. // @version 5.0.1
  4. // @description Disable link dragging and select text.
  5. // @homepageURL https://github.com/eight04/select-text-inside-a-link-like-opera#readme
  6. // @supportURL https://github.com/eight04/select-text-inside-a-link-like-opera/issues
  7. // @license MIT
  8. // @author eight <eight04@gmail.com> (http://eight04.blogspot.tw)
  9. // @namespace eight04.blogspot.com
  10. // @include *
  11. // @grant GM_addStyle
  12. // @run-at document-start
  13. // ==/UserScript==
  14.  
  15. const IS_FIREFOX = typeof InstallTrigger !== 'undefined';
  16. const movementTracker = IS_FIREFOX && createMovementTracker();
  17.  
  18. document.addEventListener("mousedown", e => {
  19.   // only Firefox supports multiple range?
  20.   if (e.shiftKey || e.altKey || e.button || e.ctrlKey && !IS_FIREFOX) {
  21.     return;
  22.   }
  23.   if (e.target.nodeName === "IMG" || e.target.nodeName === "img") {
  24.     return;
  25.   }
  26.   const target = findLinkTarget(e.target);
  27.   if (!target || !target.href) {
  28.     return;
  29.   }
  30.   const initX = e.pageX;
  31.   const initY = e.pageY;
  32.   let posX = initX;
  33.   let posY = initY;
  34.   let selection;
  35.   let mouseMoves = 0;
  36.   
  37.   const events = {
  38.     mousedown: uninit,
  39.     mousemove: e => {
  40.       posX = e.pageX;
  41.       posY = e.pageY;
  42. 			if (!selection) {
  43.         mouseMoves++;
  44.         // dragstart may not fire all the time
  45.         // https://github.com/eight04/select-text-inside-a-link-like-opera/issues/9
  46.         if (mouseMoves >= 3) {
  47.           startSelectText();
  48.         }
  49. 				return;
  50. 			}
  51. 			const caretPos = caretPositionFromPoint(
  52.         posX - window.scrollX,
  53.         posY - window.scrollY
  54.       );
  55.       selection.extend(caretPos.offsetNode, caretPos.offset);
  56.     },
  57.     mouseup: () => {
  58.       // delay uninit to cancel click event
  59.       setTimeout(uninit);
  60.     },
  61.     click: e => {
  62. 			if (!selection) {
  63.         return;
  64.       }
  65. 			// fix browser clicking issue. Cancel click event if we have selected
  66.       // something.
  67.       const clickedTarget = findLinkTarget(e.target);
  68.       if (clickedTarget === target) {
  69.         e.preventDefault();
  70.         e.stopImmediatePropagation();
  71.       }
  72.     },
  73.     dragstart: e => {
  74.       if (startSelectText()) {
  75.         e.preventDefault();
  76.       }
  77.     }
  78.   };
  79.   
  80.   for (const key of Object.keys(events)) {
  81.     document.addEventListener(key, events[key], true);
  82.   }
  83.   
  84.   function uninit() {
  85.     target.classList.remove("select-text-inside-a-link");
  86.     for (const key of Object.keys(events)) {
  87.       document.removeEventListener(key, events[key], true);
  88.     }    
  89.   }
  90.   
  91.   function startSelectText() {
  92.     const delta = movementTracker || {deltaX: posX - initX, deltaY: posY - initY};
  93.     if (Math.abs(delta.deltaX) < Math.abs(delta.deltaY)) {
  94.       uninit();
  95.       return false;
  96.     }
  97.     selection = window.getSelection();
  98.     const caretPos = caretPositionFromPoint(initX - window.scrollX, initY - window.scrollY);
  99.     if (!selection.isCollapsed && inSelect(caretPos, selection)) {
  100.       uninit();
  101.       return false;
  102.     }
  103.     if (!e.ctrlKey) {
  104.       selection.collapse(caretPos.offsetNode, caretPos.offset);
  105.     } else {
  106.       const range = new Range;
  107.       range.setStart(caretPos.offsetNode, caretPos.offset);
  108.       selection.addRange(range);
  109.     }
  110.     target.classList.add("select-text-inside-a-link");
  111.     return true;
  112.   }
  113. }, true);
  114.  
  115. if (!document.contentType || !document.contentType.endsWith("/xml")) {
  116.   document.addEventListener("DOMContentLoaded", function(){
  117.     GM_addStyle(".select-text-inside-a-link{ -moz-user-select: text!important; }");
  118.   });
  119. }
  120.  
  121. function createMovementTracker() {
  122.   // we always have to track mouse movement so we can use the delta in dragstart
  123.   // event.
  124.   // it is possible to calculate the movement between mousedown and dragstart
  125.   // events in Chrome. In Firefox, the two events are fired in the same time.
  126.   const tracker = {
  127.     posX: 0,
  128.     posY: 0,
  129.     deltaX: 0,
  130.     deltaY: 0
  131.   };
  132.   document.addEventListener("mousemove", onMouseMove);
  133.   return tracker;
  134.   
  135.   function onMouseMove(e) {
  136.     if (Math.abs(e.pageX - tracker.posX) < 5 && Math.abs(e.pageY - tracker.posY) < 5) {
  137.       return;
  138.     }
  139.     tracker.deltaX = e.pageX - tracker.posX;
  140.     tracker.deltaY = e.pageY - tracker.posY;
  141.     tracker.posX = e.pageX;
  142.     tracker.posY = e.pageY;
  143.   }
  144. }
  145.  
  146. function caretPositionFromPoint(x, y) {
  147. 	if (document.caretPositionFromPoint) {
  148. 		return document.caretPositionFromPoint(x, y);
  149. 	}
  150. 	var r = document.caretRangeFromPoint(x, y);
  151. 	return {
  152. 		offsetNode: r.startContainer,
  153. 		offset: r.startOffset
  154. 	};
  155. }
  156.  
  157. function inSelect(caretPos, selection){
  158. 	var i, len = selection.rangeCount, range;
  159. 	for (i = 0; i < len; i++) {
  160. 		range = selection.getRangeAt(i);
  161. 		if (range.isPointInRange(caretPos.offsetNode, caretPos.offset)) {
  162. 			return true;
  163. 		}
  164. 	}
  165. 	return false;
  166. }
  167.  
  168. function findLinkTarget(target) {
  169.   while (target && target.nodeName !== "A" && target.nodeName !== "a") {
  170.     target = target.parentNode;
  171.   }
  172.   return target;
  173. }