頁面選中文字彈出層，點擊層中文字或者圖片觸發事件

其實這個功能十分簡單，好多種實現方式，現在摘錄兩種實現方法：一種是使用原生js實現，一種是使用jquery實現。在實際項目中是使用kissy實現的，不過方法都差不多。本文參考了網上部分資料，如有侵權請多多原諒。

第一種使用原生js的方式：思路大體是首先將一個圖片元素進行隱藏，然后獲得選中文字事件，最后當鼠標位於選中文字上方時顯示圖片或者特定文字提示，點擊提示就觸發事件。

var hideImage = document.getElementById("hideImage");

var $selectFx = function(hideImage, eleContainer) {
	eleContainer = eleContainer || document;
	var getSelectTxt = function() {
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {
		e = e || window.event;
		var txt = getSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
		if (txt) {
			hideImage.style.display = "inline";
			hideImage.style.left = left + "px";
			hideImage.style.top = top + "px";
		} else {
			hideImage.style.display = "none";
		}
	};
	hideImage.onclick = function() {
		var txt = getSelectTxt();
		alert(txt);//此處你可以添加你想要的實現
	};
}(hideImage);

第二種是使用jquery實現的，思路基本一致，實現難度也差不多，使用jquery實現優雅一些

$(function () {
	$("#content").mouseup(function (e) {
		var x = 10;
		var y = 10;
		var text = "";
		if (document.selection) {
			text = document.selection.createRange().text;
		}
		else if (window.getSelection()) {
			text = window.getSelection();
		}
		if (text!= "") {
			var tip = "有能耐你點我一下啊";
			var tooltip = "<div id='tooltip' class='tooltip'><a onclick=doit('"+r+"')>" + tip + "</a></div>";
			$("body").append(tooltip);
			$("#tooltip").css({
				"top": (e.pageY + y) + "px",
				"left": (e.pageX + x) + "px",
				"position": "absolute"
			}).show("fast");
		}
	}).mousedown(function () {
		$("#tooltip").remove();
	});
})

function doit(text) {
	if (text != "") {
		alert(text);//此處你可以添加你想要的實現
	}
}