文章/答案/技术大牛

发布

社区首页 >问答首页 >document.addEventListener‘复制’..正在工作，但element.addEventListener‘复制’..不工作

问document.addEventListener‘复制’..正在工作，但element.addEventListener‘复制’..不工作
EN

Stack Overflow用户

提问于 2019-07-25 14:20:42

回答 1查看 1.4K关注 0票数 0

我使用的是Java7.0，我想为“PrimeFaces”事件启用一个eventListener脚本，如下所述：

https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event

当我将eventListener附加到文档时，一切正常：

我的Java脚本函数：

function jsCopyAction(){
    document.addEventListener('copy', (event) => {
        const selection = document.getSelection();
        event.clipboardData.setData('text/plain', selection.toString());
        event.preventDefault();
        document.getElementById("badTransFormId:jsCopyTextId").value=selection.toString();

        var jsfCommandButton = document.getElementById("badTransFormId:jsCopyLinkId");
        jsfCommandButton.click();
    });
};

我的facelet页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
    </h:head>
    <h:body>
        <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
        <h:outputStylesheet library="css" name="styles.css"  />
        <h:outputScript library="primefaces" name="jquery/jquery.js"/>
        <h:outputScript library="js" name="commons.js" />
        <script>
                // we need to execute the js init() function after the page load:
                // @see https://stackoverflow.com/questions/8996316/how-to-execute-javascript-after-page-load
                jQuery(document).ready(function() {
                    jQuery(document).ready(function() {
                        // twice in document.ready to execute after Primefaces callbacks
                        jsCopyAction();
                    });
                });
        </script>
        <h:form id="badTransFormId">
            <div>
                <div>
                    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" columnClasses="label, value">
                        <h:commandButton style="display:none" id="jsCopyLinkId" action="#{badTransBean2.jsCopyAction}">
                            <f:ajax execute = "badTransFormId:jsCopyTextId" render = "@form"/>
                        </h:commandButton>
                        <input type="hidden" id="badTransFormId:jsCopyTextId" name = "jsCopyText" value="" />
                    </h:panelGrid>
                </div>
            </div>
            <div id="translEntityDiv">
              <h:outputText id= "correspHomeEntityId" value="Alabala alabala tralala" />
            </div>
        </h:form>
    </h:body>
</html>

我的Bean：

@ManagedBean(name = "badTransBean2")
@ViewScoped
public class BadTransBean2 implements Serializable {


    public void jsCopyAction() {
        HttpServletRequest req = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext()
                .getRequest();
        String jsCopyText = req.getParameter("jsCopyText");

        if (StringUtils.isEmpty(jsCopyText) || StringUtils.isEmpty(jsCopyText.trim())) {
            return;
        }
        jsCopyText = jsCopyText.trim().toLowerCase();

        System.out.println(jsCopyText);
    }

}

但是，当我想要更具体，并且想要将EventListener附加到特定的HTML元素时，只有当用户在浏览器中加载页面后第一次复制元素时才有效。当用户复制元素时，Java Script事件侦听器根本不会触发。在Chrome和Mozilla上测试过。

我更改后的JavaScript函数：

function jsCopyAction(){

    const source = document.getElementById("badTransFormId:correspHomeEntityId");

    source.addEventListener('copy', (event) => {
        const selection = document.getSelection();
        event.clipboardData.setData('text/plain', selection.toString());
        event.preventDefault();
        document.getElementById("badTransFormId:jsCopyTextId").value=selection.toString();

        var jsfCommandButton = document.getElementById("badTransFormId:jsCopyLinkId");
        jsfCommandButton.click();
    });
};

我的pom.xml：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>seller</groupId>
<artifactId>home.digest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>

<name>home.digest Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://maven.apache.org</url>
<repositories>
    <repository>
        <id>prime-repo</id>
        <name>Prime Repo</name>
        <url>http://repository.primefaces.org</url>
    </repository>
</repositories>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
</properties>

<dependencies>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.11</version>
        <scope>test</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>3.141.59</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpcore -->
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpcore</artifactId>
        <version>4.4.10</version>
    </dependency>
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>4.5.6</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>7.0</version>
    </dependency>
    <dependency>
        <groupId>org.jboss.logging</groupId>
        <artifactId>jboss-logging</artifactId>
        <version>3.0.1.GA</version>
        <scope>compile</scope>
        <optional>true</optional>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.hibernate.javax.persistence/hibernate-jpa-2.1-api -->
    <dependency>
        <groupId>org.hibernate.javax.persistence</groupId>
        <artifactId>hibernate-jpa-2.1-api</artifactId>
        <version>1.0.2.Final</version>
        <scope>provided</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core -->
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-core</artifactId>
        <version>4.3.6.Final</version>
         <scope>provided</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/javax.enterprise/cdi-api -->
    <dependency>
        <groupId>javax.enterprise</groupId>
        <artifactId>cdi-api</artifactId>
        <version>2.0.SP1</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.jboss.as</groupId>
        <artifactId>jboss-as-web</artifactId>
        <version>7.1.1.Final</version>
        <scope>compile</scope>
        <optional>true</optional>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.jboss.spec.javax.ejb/jboss-ejb-api_3.2_spec -->
    <dependency>
        <groupId>org.jboss.spec.javax.ejb</groupId>
        <artifactId>jboss-ejb-api_3.2_spec</artifactId>
        <version>1.0.2.Final</version>
        <scope>provided</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.cloud/google-cloud-translate -->
    <dependency>
        <groupId>com.google.cloud</groupId>
        <artifactId>google-cloud-translate</artifactId>
        <version>1.79.0</version>
    </dependency>
    <dependency>
        <!-- jsoup HTML parser library @ https://jsoup.org/ -->
        <groupId>org.jsoup</groupId>
        <artifactId>jsoup</artifactId>
        <version>1.11.3</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
        <version>3.8.1</version>
    </dependency>
</dependencies>

<build>
    <finalName>home.digest</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven 
            defaults (may be moved to parent pom) -->
        <plugins>
            <plugin>
                <artifactId>maven-clean-plugin</artifactId>
                <version>3.1.0</version>
            </plugin>
            <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.0.2</version>
            </plugin>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.0</version>
            </plugin>
            <plugin>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.1</version>
            </plugin>
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.2</version>
            </plugin>
            <plugin>
                <artifactId>maven-install-plugin</artifactId>
                <version>2.5.2</version>
            </plugin>
            <plugin>
                <artifactId>maven-deploy-plugin</artifactId>
                <version>2.8.2</version>
            </plugin>
        </plugins>
    </pluginManagement>
</build>

可能的原因是什么？

copy

dom-events

javascript

primefaces

event-handling

回答 1

Stack Overflow用户

发布于 2019-07-30 13:34:57

我找不出问题的原因。但是，我能够解决问题，如下所示：

1.)我的Java脚本函数：

function jsCopyAction(){

    var source = document.getElementById("badTransFormId:correspHomeEntityId");
    document.addEventListener('copy', (event) => {

    if ( event == null || event.srcElement == null ||  event.srcElement.id == null ){
        return;
    }

    selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString());
    event.preventDefault();
    document.getElementById("badTransFormId:jsCopyTextId").value=selection.toString();

    var jsfCommandButton = null;

    if ( event.srcElement.id == 'badTransFormId:correspHomeEntityId'){
        jsfCommandButton = document.getElementById("badTransFormId:jsCopyCorrespHomeEntityId");
    } else if ( event.srcElement.id == 'badTransFormId:translDescrDetailTxtId'){
        jsfCommandButton = document.getElementById("badTransFormId:jsCopyTranslDescrId");
    }
    if ( jsfCommandButton != null){
        jsfCommandButton.click();
    }
}); };

如您所见，事件侦听器被附加到文档，但是在Java Script函数中，我检查了事件源，并根据它调用页面上的不同隐藏按钮，而这些按钮又调用不同的bean方法。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57195503

复制

相似问题

问document.addEventListener‘复制’..正在工作，但element.addEventListener‘复制’..不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问document.addEventListener‘复制’..正在工作，但element.addEventListener‘复制’..不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问document.addEventListener‘复制’..正在工作，但element.addEventListener‘复制’..不工作
EN