Javascript 按住鼠标2秒后将文本复制到剪贴板

想法是在react中创建一个元素，可以单击或长单击（长触摸）。onClick应直接打开链接，longClick应将链接复制到剪贴板（按下按钮2秒后）

这两个功能都非常适合自己的应用。但如果我将它们合并为一个，浏览器会说execCommand被忽略，因为它不是直接用户交互的一部分。这意味着触发这个命令需要2秒

我对它进行了测试，在Firefox59中，treshhold约为0.5秒，在Chrome65中为1秒

如果在此时间之后触发某个函数，则该函数不再是直接的用户交互

因此，如果我设置

time={0.4}

seconds，就像下面的代码一样，它可以工作：

    import { ListItem, ListItemText } from 'material-ui/List'
    import PropTypes from 'prop-types'
    import React, { Component } from 'react'
    import { withStyles } from 'material-ui/styles'
    import { withRouter } from 'react-router-dom'
    import ClickNHold from 'react-click-n-hold';

    const styles = {
        card: {
            borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
            '&:last-of-type': { borderBottom: 'none' }
        },
        title: {
            marginBottom: 16,
            fontSize: 14
        },
        itemText: { fontSize: '0.8em' }
    }

    class GroupCard extends Component {

        openGroup = () => {
            this.props.history.push(`/groups/${this.props.link}`)
        }

        copyToClipboard = () => {
            const uri = 'https://example.com/api/',
                textField = document.createElement('textarea')
            textField.innerText = `${uri}groups/${this.props.link}`
            document.body.appendChild(textField)
            textField.select()
            document.execCommand('copy')
            textField.remove()
        }

        touchEnd = (e, enough) => {
            enough ? null : this.openGroup()
        }

        render() {
            const { classes, name, link } = this.props,
                uri = 'https://example.com/api/'
            return (

                <ClickNHold time={0.4}
                            onClickNHold={this.copyToClipboard}
                            onEnd={this.touchEnd}>
                    <ListItem button className={classes.card} >
                        <ListItemText
                            primary={name ? name : 'unknown'}
                            secondary={<span className={classes.itemText}>{`${uri}groups/${link}`}</span>}
                        />
                    </ListItem>
                </ClickNHold>

            )
        }
    }

    GroupCard.propTypes = { classes: PropTypes.object.isRequired }

    export default withRouter(withStyles(styles)(GroupCard))

从“物料ui/列表”导入{ListItem，ListItemText}
从“道具类型”导入道具类型
从“React”导入React，{Component}
从“材质ui/样式”导入{withStyles}
从“react router dom”导入{withRouter}
从“react-click-n-hold”导入ClickNHold；
常量样式={
卡片：{
borderBottom:“1px实心rgba（0,0,0,0.12）”，
“&：类型的最后一个：{borderBottom:'none'}
},
标题：{
marginBottom:16，
尺寸：14
},
itemText:{fontSize:'0.8em'}
}
类GroupCard扩展组件{
openGroup=（）=>{
this.props.history.push（`/groups/${this.props.link}`）
}
copyToClipboard=（）=>{
常量uri=https://example.com/api/',
textField=document.createElement（'textarea'）
textField.innerText=`${uri}组/${this.props.link}`
document.body.appendChild（textField）
textField.select（）
document.execCommand（'copy'）
textField.remove（）
}
touchEnd=（足够了）=>{
够了吗？空：this.openGroup（）
}
render（）{
const{classes，name，link}=this.props，
乌里https://example.com/api/'
返回(
)
}
}
GroupCard.propTypes={classes:propTypes.object.isRequired}
使用路由器导出默认值（使用样式（样式）（GroupCard））

但是该代码在

time={2}

seconds时不起作用。所以这里唯一的问题是时间元素。是否有其他解决方案可以将文本复制到剪贴板，或避免直接用户交互的broser默认时间？

---

或者说simpy在基于网络的应用程序中是不可能的，我必须使用react native之类的工具吗？

这是一个避免性能问题的建议

Psuedo:

const mouseDown = false; //Track the state of the `click`
const openLink = false; //Track if opening the link when `click` is released

document.listen(mouseEvent, (event) {
 if(event === 'mouseDown') {
   openLink = true;
   mouseDown = true;
   setTimeOut(() => { 
      if(mouseDown) {
        openLink = false; //Don't open the link on click release, we copied to clipboard instead;
        copyToClipboard()
      }          
    }, 2*seconds);
  } else {
    mouseDown = false;
    if(openLink = true) {
      openLink = false;
      openTheLink();
    }
  }
});

---

按照赛斯的想法，链接会立即被复制，但信息会在2秒钟后出现。这似乎是一个很好的解决办法

    class GroupCard extends Component {

        openGroup = () => {
            this.props.history.push(`/groups/${this.props.link}`)
        }
        touchStart = () => {
            const uri = 'https://example.com/',
                textField = document.createElement('textarea')
            textField.innerText = `${uri}groups/${this.props.link}`
            document.body.appendChild(textField)
            textField.select()
            document.execCommand('copy')
            textField.remove()
        }

        touchEnd = (e, enough) => {
            !enough && this.openGroup()
        }

        render() {
            const { classes, name, link } = this.props,
                uri = 'https://example.com/'
            return (

                <ClickNHold time={2}
                            onStart={this.touchStart}
                            onClickNHold={console.log('copied')}
                            onEnd={this.touchEnd}>
                    <ListItem button className={classes.card} >
                        <ListItemText
                            primary={name ? name : 'unknown'}
                            secondary={<span className={classes.itemText}>{`${uri}groups/${link}`}</span>}
                        />
                    </ListItem>
                </ClickNHold>

            )
        }
    }

class-GroupCard扩展组件{
openGroup=（）=>{
this.props.history.push（`/groups/${this.props.link}`）
}
touchStart=（）=>{
常量uri=https://example.com/',
textField=document.createElement（'textarea'）
textField.innerText=`${uri}组/${this.props.link}`
document.body.appendChild（textField）
textField.select（）
document.execCommand（'copy'）
textField.remove（）
}
touchEnd=（足够了）=>{
！够了&&this.openGroup（）
}
render（）{
const{classes，name，link}=this.props，
乌里https://example.com/'
返回(
)
}
}