时间戳

首页 > 解决方案 > Javascript：长按文件对话框

javascript - Javascript：长按文件对话框

问题描述

是否可以使用长按进行文件对话框？例如JavaScript 中的长按？有答案以触发长按事件。但是，这不能用于在大多数浏览器中触发文件输入点击，因为它不被视为用户激活。

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() 
  {    fileChooser.click() // assume fileChoose is a file input element
       // This is suppressed by most browsers.
  },1000);
  return false; 
});

标签： javascriptfiledialog

解决方案

当然有可能。您可能必须使用mousedownandmouseup事件开发自己的检测。计算 和 之间的时间mousedown并mouseup确定延迟是否足够长以引起其他操作。

https://jsfiddle.net/psc4yk76/2/

(function() {
  const longtime = 500;
  const target = document.getElementById('target');
  const input = document.getElementById('input');
  const button = document.getElementById('button');

  var timedown = 0;

  button.onmousedown = () => {
    timedown = new Date().getTime();
  };

  button.onmouseup = () => {
    let timeup = new Date().getTime();
    let insert = document.createElement('div');

    if( (timeup - timedown) < longtime ) {
      insert.appendChild(document.createTextNode('Short!'));
    } else {
      insert.appendChild(document.createTextNode('Long!'));
      input.click();
    }

    target.appendChild(insert);
  }
})()

推荐阅读