页面选中文字弹出层，点击层中文字或者图片触发事件

其实这个功能十分简单，好多种实现方式，现在摘录两种实现方法：一种是使用原生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);//此处你可以添加你想要的实现

	}

}