Question

我正在开发一个应用程序（在React中），其中将来自不同站点的网页加载到iframe中（将这些页面下载到本地系统中）。用户必须单击页面，然后我将为单击的元素生成xpath或cssPath。为了检测点击，我正在添加eventListeners。

问题陈述： 我也能够识别元素和CSS路径/ Xpath。但是，如果元素是具有href属性值的定位标记。在生成路径时，它还会尝试导航到锚标记的href属性中添加的页面。

尝试：

event.preventDefault()
event.stopPropagation()
event.stopImmediatePropagation()
添加了Click侦听器，并从侦听器附加方法返回了false（我的代码在mouseUpListener附加函数中）

示例代码：

<iframe  src={iframeSrc} sandbox="allow-same-origin allow-scripts" ref='htmlPageRef'/>

HTML页面包含：

<a href='visitMySite.com'> Go to My Website</a>

添加侦听器：

 frameDoc.addEventListener("mouseup", this.mouseupListener, false);

在事件监听器中附加的方法中，我执行了event.preventDefault，event.stopPropagation，event.stopImmediatePropagation。

import React from 'react';
import ReactDOM from 'react-dom';
import Reminder from './reminder';

class TodoCheckList extends  React.Component{
    componentDidMount(){
        console.log('testest');
    }

    callMe(that){
         console.log('test');
        let iframe = ReactDOM.findDOMNode(that.refs.htmlPageRef);
        console.log(iframe);
        var frameDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
        frameDoc.addEventListener("click", this.clickListener, false);
     }


    clickListener = (e)=> {
        console.log(e);
        e.preventDefault();
    }
    render(){
        return (
        <div >

            <iframe onClick={ () => this.callMe(this) } ref='htmlPageRef' src="frameFILE.html" sandbox="allow-same-origin allow-scripts" width="600"></iframe>
        </div>
        );
    }
}
export default TodoCheckList;

iframe frameFILE内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
        Iframe page
        <a href="google.co.in">Open Google</a>

</body>
</html>

Answer 1

将mouseup更改为click，并添加了return false;

document.getElementById('myLink').addEventListener("click", function(event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
  return false;
}, false)

<a href='visitMySite.com' id='myLink'> Go to My Website</a>

单击锚点标记时，event.preventDefault（），event.stopPropagation（）无法停止页面重定向

1 个答案: