`
diding
  • 浏览: 81264 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

LinkElement的鼠标事件

阅读更多
虽然TextFlow的LinkElement支持MouseEvent,但官方手法,很遗憾要打浏览器窗口,还要用户加上CTRL键,如果是前台浏览到无所谓,但如果作为编辑器使用,真得有一种说不出的感觉.
linkElement.addEventListener(MouseEvent.CLICK,LinkElementCtrlClickHandler,false, 0, false);

private function LinkElementCtrlClickHandler(event:FlowElementMouseEvent):void{
	var linkElement:LinkElement=event.flowElement as LinkElement;
        //编辑和删除等
	doOpenURLWinHandler(linkElement);
}


经过昨天的研究,终于找到一种更为好的方法来实行作为编辑器的手法实现:
要实现此功能必须解决2个问题:

1.用户在编辑时加入超链接后,像插入图片一样,要获得当前的链接接对象LinkElement,前加上事件(官方没有直接给出,只有自已来摸索实现)
2.如果用户不断的加入超链接,如何得到其实体对象(本想用EventDispatcher,如是用,又走上了老路,于是,又得遍历当前TextLine,得textLine只有两个子对象,shape,不能象ILG那样来根据name对比获取,最后,想到的办法就是根据
var absIndex:int=LE.getAbsoluteStart();
var between:int=absIndex+LE.textLength;

来对比实现)
核心代码:
/***********************************************************
		 ************************ 设置链接模块********************
		 * *********************************************************/
		 //打开链接窗口
		public function doOpenURLWinHandler(linkElement:LinkElement=null):void
		{
			if (linkElement){
				var window:URLWindow=URLWindow(PopUpManager.createPopUp(toolBar, URLWindow, true));
				window.getWinFindArg(this,linkElement,linkElement.href, linkElement.target, true)
			}else if (selStart != selFinish){
				var window2:URLWindow=URLWindow(PopUpManager.createPopUp(toolBar, URLWindow, true));
				window2.getWinFindArg(this)
			}else{
				Alert.show("请选择文字", "提示信息")
			}
		}
		//设置或编辑链接
		private var watchIndex:int;
		public function setOrEditURL(currentLinkElement:LinkElement=null,urlStr:String=null, click_target:String=null):void
		{
			var em:EditManager=EditManager(_textFlow.interactionManager);
			if(currentLinkElement!=null){
				//编辑
				var beginIndex:int=currentLinkElement.getAbsoluteStart();
				watchIndex=beginIndex
				var lastIndex:int=beginIndex+currentLinkElement.textLength;
				em.setSelection(beginIndex,lastIndex)
			}else{
				//添加
				em.setSelection(selStart,selFinish);
				watchIndex=selStart;	
			}
			em.applyLink(urlStr, click_target, false, null);
			_textFlow.interactionManager.setFocus();
			_textFlow.flowComposer.updateAllContainers();
			_textFlow.addEventListener(UpdateCompletionEvent.UPDATE_COMPLETE,createLEHandler)
		}
		
		private function createLEHandler(event:UpdateCompletionEvent):void{
			var spanElement:SpanElement=_textFlow.findLeaf(watchIndex) as SpanElement;
			//trace(spanElement.parent);
			var linkElement:LinkElement=spanElement.parent as LinkElement;
			if(linkElement){
			   var LEdispatcher:EventDispatcher=linkElement.getEventMirror();
			   LEdispatcher.addEventListener(MouseEvent.CLICK, LinkElementHandler,false, 0, false);
			    //官方手法,很遗憾要打浏览器窗口,还要用户加上CTRL键
			    //linkElement.addEventListener(MouseEvent.CLICK,LinkElementCtrlClickHandler,false, 0, false);
			}
		}
		
		private function LinkElementCtrlClickHandler(event:FlowElementMouseEvent):void{
			var linkElement:LinkElement=event.flowElement as LinkElement;
			doOpenURLWinHandler(linkElement);
		}
		
		private function LinkElementHandler(event:MouseEvent):void
		{
			var textLine:TextLine=event.currentTarget as TextLine;
			var textFlowLine:TextFlowLine=textLine.userData as TextFlowLine;
			var paraElement:ParagraphElement=textFlowLine.paragraph as ParagraphElement;
			

			trace("numChildren=="+paraElement.numChildren)
			
			for(var k:int=0;k<paraElement.numChildren;k++){
				var childElement:*=paraElement.getChildAtIndex(k);
				if(childElement is LinkElement){
					var currentLE:LinkElement=childElement as LinkElement;
					//判断参考
					//由于鼠标点击时,selStart==selFinish,所以只需要判断selStart相当于caret
					//是否位于linkElement文字块中,
					//调度此事件
					var absIndex:int=currentLE.getAbsoluteStart();
					var between:int=absIndex+currentLE.textLength;
					if(selStart<between){
						trace(currentLE.href)
					    trace(currentLE.target)
						break;
					}
					
				}
			}
			
		}
		//删除链接
		public function delURL(currentLinkElement:LinkElement):void
		{
			//获取linkElement开始和结束位置
			var beginIndex:int=currentLinkElement.getAbsoluteStart();
			watchIndex=beginIndex;
			var lastIndex:int=beginIndex+currentLinkElement.textLength;
			var em:IEditManager=IEditManager(_textFlow.interactionManager);
			em.setSelection(beginIndex,lastIndex)
			em.applyLink("", null, false, null);
			_textFlow.interactionManager.setFocus();
			
		}


附上运行测试的图片:

  • 大小: 15.2 KB
分享到:
评论

相关推荐

    javascript经典特效---Title显示链接路径2.rar

    var linkElement = document.getElementById('myLink'); linkElement.title = '这是链接的目标路径'; ``` 在"Title显示链接路径2.htm"这个文件中,实现的效果可能是当用户鼠标悬浮在链接上时,Title属性会显示该...

    炫酷效果 跟随鼠标移动的.rar

    在描述中提到,“跟随鼠标出现各种各样的炫酷效果,鼠标到哪里这个就显示在哪里”,这可能是通过JavaScript的`onmousemove`事件来监听鼠标移动,并在事件触发时更新页面元素的位置或状态。同时,可能使用CSS3的动画...

    jquery鼠标移动上出现提示框

    本示例“jquery鼠标移动上出现提示框”着重于jQuery的事件处理和用户交互功能,特别是如何在鼠标悬停(hover)时显示提示信息。 首先,`index.html`是网页的主文件,它会引用`jquery.min.js`库,这是jQuery的核心...

    jquery鼠标悬停动态显示提示文字或者图片

    这段代码会在用户鼠标进入和离开`.hover-element`类的元素时执行相应的操作。如果是`&lt;div&gt;`,则可能需要借助第三方库如Bootstrap的tooltip插件来显示文字提示;如果是`&lt;img&gt;`,则在悬停时更换图片源,并在鼠标离开时...

    selenium+python自动化测试之鼠标和键盘事件

    Selenium WebDriver提供了一套强大的API来模拟鼠标事件。这些事件通常被封装在`ActionChains`类中,该类提供了许多实用的方法来模拟真实用户的鼠标操作,例如点击、双击、鼠标悬停和拖拽等。 ##### 2.2 `...

    Selenium鼠标与键盘事件常用操作方法示例

    之后,利用ActionChains类执行鼠标事件,或者使用send_keys()方法配合Keys类执行键盘事件。 例如,要对页面上的特定元素执行鼠标右击事件,可以使用以下代码: ```*** *** ***mon.action_chains import ...

    jQuery鼠标吸附动画特效插件

    1. **鼠标事件处理**:此插件依赖于jQuery中的鼠标事件,如`mousemove`,监听用户的鼠标移动,根据鼠标的实时位置调整元素的位置,实现吸附效果。 2. **CSS3动画**:利用CSS3的`transition`和`transform`属性,可以...

    简单的query鼠标提示效果

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及动画效果等任务。 首先,我们来了解Tooltip的基本概念。Tooltip是一种用户界面设计元素,当用户将鼠标悬停在某个元素上时,会显示额外的相关信息。...

    Numscrubberjs可以通过左右拖动鼠标来更改输入数字的值

    库内部会监听鼠标的拖动事件,当用户按下鼠标并在输入框内移动时,它会计算出鼠标移动的距离,并根据预设的步长规则来增加或减少数字。这种动态更新的方式使得用户能够快速调整数值,而无需反复点击加减按钮或者手动...

    js.rar_js

    在本压缩包"js.rar"中,我们重点探讨的是JavaScript中的鼠标事件。这些事件是JavaScript与用户交互的重要方式,使得网页可以响应用户的鼠标操作,增强用户体验。 1. 鼠标事件类型: - `click`:当鼠标点击并释放在...

    jQuery鼠标悬停弹出消息提示框Tipso插件.zip

    &lt;link rel="stylesheet" href="path/to/tipso.css"&gt; &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="path/to/tipso.min.js"&gt;&lt;/script&gt; ``` 然后,通过jQuery选择器选中要添加提示框...

    UI自动化selenium封装常用工具类(元素定位方法,鼠标动作,浏览器操作等)

    4. `By.NAME`、`By.CLASS_NAME`、`By.TAG_NAME`、`By.LINK_TEXT` 和 `By.PARTIAL_LINK_TEXT` 等也是常用的定位方式,根据实际需求选择合适的方法。 二、鼠标动作 Selenium提供了`ActionChains`类来模拟鼠标操作。 ...

    鼠标移上去的提示框tiper

    &lt;link rel="stylesheet" href="tiper.css"&gt; 这是提示内容"&gt;鼠标移到我这里 // 使用tiper插件 $('#myElement').tiper({ content: '这是自定义的提示内容', placement: 'bottom', delay: 300 }); ```...

    js中的事件对象解析1

    当在 DOM(文档对象模型)中触发一个事件时,如点击、鼠标移动等,浏览器会生成一个事件对象(event object),这个对象包含了关于事件的所有相关信息。在本文中,我们将深入探讨 DOM 事件对象、IE 事件对象以及如何...

    jQuery事件处理

    8. **触发事件**: jQuery还允许手动触发事件,`$(element).trigger('eventType')`: ```javascript $('#myElement').on('customEvent', function() { console.log('自定义事件被触发'); }); $('#myElement')....

    处理Selenium3+python3定位鼠标悬停才显示的元素

    现在,假设我们要对一个名为“设置”的链接进行鼠标悬停操作,我们可以使用`find_element_by_link_text`方法找到这个元素: ```python mouse = driver.find_element_by_link_text("设置") ``` 接下来,我们需要...

    AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    link: function(scope, element, attrs) { var startX, startY, rect; element.on('mousedown', function(event) { startX = event.clientX; startY = event.clientY; rect = element[0]....

    jquery鼠标悬停图片翻转效果

    在jQuery中,我们可以使用`hover()`函数来监听鼠标进入和离开元素的事件。这个函数接受两个参数,分别对应鼠标进入和离开时执行的函数。 ```javascript $("#element").hover(function() { // 鼠标进入时的代码 }, ...

    javascript实现的圆角提示框

    在这个圆角提示框的实现中,JavaScript可能被用来监听用户的鼠标悬停事件,当鼠标停留在特定元素上时,显示提示框;当鼠标离开时,隐藏提示框。 ```javascript // 获取要添加提示框的元素 var element = document....

    javascript完全学习手册2 源码

    10.5.1 鼠标事件 10.5.2 键盘事件 10.5.3 表单事件 10.5.4 编辑事件 10.5.5 页面事件 第11章 使用Cookie和文件 11.1 Cookie 11.1.1 Cookie概述 11.1.2 Cookie属性 11.1.3 创建Cookie 11.1.4 ...

Global site tag (gtag.js) - Google Analytics