虽然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
分享到:
相关推荐
var linkElement = document.getElementById('myLink'); linkElement.title = '这是链接的目标路径'; ``` 在"Title显示链接路径2.htm"这个文件中,实现的效果可能是当用户鼠标悬浮在链接上时,Title属性会显示该...
在描述中提到,“跟随鼠标出现各种各样的炫酷效果,鼠标到哪里这个就显示在哪里”,这可能是通过JavaScript的`onmousemove`事件来监听鼠标移动,并在事件触发时更新页面元素的位置或状态。同时,可能使用CSS3的动画...
本示例“jquery鼠标移动上出现提示框”着重于jQuery的事件处理和用户交互功能,特别是如何在鼠标悬停(hover)时显示提示信息。 首先,`index.html`是网页的主文件,它会引用`jquery.min.js`库,这是jQuery的核心...
这段代码会在用户鼠标进入和离开`.hover-element`类的元素时执行相应的操作。如果是`<div>`,则可能需要借助第三方库如Bootstrap的tooltip插件来显示文字提示;如果是`<img>`,则在悬停时更换图片源,并在鼠标离开时...
Selenium WebDriver提供了一套强大的API来模拟鼠标事件。这些事件通常被封装在`ActionChains`类中,该类提供了许多实用的方法来模拟真实用户的鼠标操作,例如点击、双击、鼠标悬停和拖拽等。 ##### 2.2 `...
之后,利用ActionChains类执行鼠标事件,或者使用send_keys()方法配合Keys类执行键盘事件。 例如,要对页面上的特定元素执行鼠标右击事件,可以使用以下代码: ```*** *** ***mon.action_chains import ...
1. **鼠标事件处理**:此插件依赖于jQuery中的鼠标事件,如`mousemove`,监听用户的鼠标移动,根据鼠标的实时位置调整元素的位置,实现吸附效果。 2. **CSS3动画**:利用CSS3的`transition`和`transform`属性,可以...
jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及动画效果等任务。 首先,我们来了解Tooltip的基本概念。Tooltip是一种用户界面设计元素,当用户将鼠标悬停在某个元素上时,会显示额外的相关信息。...
库内部会监听鼠标的拖动事件,当用户按下鼠标并在输入框内移动时,它会计算出鼠标移动的距离,并根据预设的步长规则来增加或减少数字。这种动态更新的方式使得用户能够快速调整数值,而无需反复点击加减按钮或者手动...
在本压缩包"js.rar"中,我们重点探讨的是JavaScript中的鼠标事件。这些事件是JavaScript与用户交互的重要方式,使得网页可以响应用户的鼠标操作,增强用户体验。 1. 鼠标事件类型: - `click`:当鼠标点击并释放在...
<link rel="stylesheet" href="path/to/tipso.css"> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="path/to/tipso.min.js"></script> ``` 然后,通过jQuery选择器选中要添加提示框...
4. `By.NAME`、`By.CLASS_NAME`、`By.TAG_NAME`、`By.LINK_TEXT` 和 `By.PARTIAL_LINK_TEXT` 等也是常用的定位方式,根据实际需求选择合适的方法。 二、鼠标动作 Selenium提供了`ActionChains`类来模拟鼠标操作。 ...
<link rel="stylesheet" href="tiper.css"> 这是提示内容">鼠标移到我这里 // 使用tiper插件 $('#myElement').tiper({ content: '这是自定义的提示内容', placement: 'bottom', delay: 300 }); ```...
当在 DOM(文档对象模型)中触发一个事件时,如点击、鼠标移动等,浏览器会生成一个事件对象(event object),这个对象包含了关于事件的所有相关信息。在本文中,我们将深入探讨 DOM 事件对象、IE 事件对象以及如何...
8. **触发事件**: jQuery还允许手动触发事件,`$(element).trigger('eventType')`: ```javascript $('#myElement').on('customEvent', function() { console.log('自定义事件被触发'); }); $('#myElement')....
现在,假设我们要对一个名为“设置”的链接进行鼠标悬停操作,我们可以使用`find_element_by_link_text`方法找到这个元素: ```python mouse = driver.find_element_by_link_text("设置") ``` 接下来,我们需要...
link: function(scope, element, attrs) { var startX, startY, rect; element.on('mousedown', function(event) { startX = event.clientX; startY = event.clientY; rect = element[0]....
在jQuery中,我们可以使用`hover()`函数来监听鼠标进入和离开元素的事件。这个函数接受两个参数,分别对应鼠标进入和离开时执行的函数。 ```javascript $("#element").hover(function() { // 鼠标进入时的代码 }, ...
在这个圆角提示框的实现中,JavaScript可能被用来监听用户的鼠标悬停事件,当鼠标停留在特定元素上时,显示提示框;当鼠标离开时,隐藏提示框。 ```javascript // 获取要添加提示框的元素 var element = document....
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 ...