选中文本弹出对话框效果（如百度文库）

最新推荐文章于 2022-06-06 21:14:22 发布

空谷丶幽兰

最新推荐文章于 2022-06-06 21:14:22 发布

阅读量949

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/103606525

版权

JavaScript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

实现效果：

  	1.按住鼠标选中文本松开时弹出对话框（onmouseup事件）
  	2.点击对话框外的内容时，对话框隐藏。
  	3.点击选中的内容对话框也隐藏

在这里插入图片描述

实现步骤:

   	1.给文本内容外的盒子注册一个onmouseup事件（鼠标松开时）
   	2.判断是否选中内容，如果只点击没选中不弹出，如果选中文本内容则弹出对话框
   	3.再给整个页面注册onmousedown事件（鼠标按下时发生），
   	4.如果选中点击的的id不是对话框，则隐藏对话框。
   	5.取消选中内容，（如果点击的选中内容则一直弹出）

实现细节：

	1.window.getSelection()返回一个选中的对象，表示用户选择的文本范围
	  或插入符的当前位置，document.selection.createRange() 这个属性只在 IE
	  10 以前版本被支持，(其实还有一个 document.getSelection() 虽然还能用但
	  已经被标记成要废弃的方法了) 在非IE浏览器（Firefox、Safari、Chrome、Opera）
	  下可以使用window.getSelection()获得selection对象，
    2..js中事件是会冒泡的，所以this是可以变化的event.target不会变化，
        它永远指向触发事件的DOM元素本身。
    3.event.target和event.srcElement都指事件源，event.srcElement是IE浏览器中
    的， 而event.target是大多数浏览器中的。因此要兼容性写法
    4. window.getSelection().removeAllRanges() ， document.selection.empty()，
       都是取消选中内容

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选中文本弹出对话框</title>
	<style>
		.tool{
			cursor: pointer;
			display: none;
			background-color: white;
			color: blue;
			position: absolute;
			left: 0px;
			top: 0px;
		}
	</style>
	<script>
		function $(id){
			return document.getElementById(id);
		}
		window.onload = function (){
			$('art').onmouseup = function(event){ //onmouseup松开鼠标按钮时执行
				var event = event || window.event;
				var x = event.clientX - $('wenku').offsetLeft;
				var y = event.clientY - $('wenku').offsetTop;
				var txt; //getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围或插入符的当前位置。
				txt = window.getSelection ? window.getSelection().toString() : document.selection.creatRange().text;
				if(txt){ 
				$('toolDiv').style.display = "block";
				$('toolDiv').style.left = x + 'px';
				$('toolDiv').style.top = y + 'px';
				}

			}
			//点击其他地方让盒子消失不能用onclick
			document.onmousedown = function (event){ //鼠标按下时发生
				var event = event || window.event;
				var id = event.target ? event.target.id : event.srcElement.id; //
				if(id !="toolDiv"){
					$('toolDiv').style.display = 'none';
				}
				//取消选中内容
				window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
			}
		}
	</script>
</head>
<body>
	<div class="wenku" id="wenku">
		<div class="art" id="art">
			黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋。其辞曰：
余从京域，言归东藩。背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散。俯则未察，仰以殊观，睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王所见，无乃是乎？其状若何？臣愿闻之。”
余告之曰：“其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。髣髴兮若轻云之蔽月，飘飖兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。
于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。壤皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡。无良媒以接欢兮，托微波而通辞。愿诚素之先达，解玉佩以要之。嗟佳人之信修，羌习礼而明诗。抗琼珶以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺。感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。
于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔。践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。
尔乃众灵杂沓，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女。叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。体迅飞凫，飘忽若神，凌波微步，罗袜生尘。动无常则，若危若安。进止难期，若往若还。转眄流精，光润玉颜。含辞未吐，气若幽兰。华容婀娜，令我忘餐。
于是屏翳收风，川后静波。冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝。六龙俨其齐首，载云车之容裔，鲸鲵踊而夹毂，水禽翔而为卫。
于是越北沚。过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当。抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮，哀一逝而异乡。无微情以效爱兮，献江南之明珰。虽潜处于太阴，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。
于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘返，思绵绵而增慕。夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路。揽騑辔以抗策，怅盘桓而不能去。
		</div>
		<div class="tool" id="toolDiv">
			<span>【搜索】</span><span>【复制】</span><span>【共享】</span>
		</div>
	</div>
</body>
</html>