javascript - document.getElementById ('button' ).click() 在我的电脑上工作但在另一台电脑上不起作用

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

我有一个DIV当我点击它时，它会触发一个javascript来点击文件上传按钮，即display:none 。它可以在我的电脑上运行 Chrome、Firefox、Chromium。但我想知道为什么它在我 friend 的电脑上不起作用。

Is it because the browser issue or what? Me and my friend using different version of Ubuntu. Nothing happen when they click on the DIV

这是我的代码

<div onclick='uploadphoto()' title='Click to edit Profile Picture'></div>

<form action="js/ajaxuploadprofile.php" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" style='display:none'>
    <input type="hidden" name="maxSize" value="2000000" />
    <input type="hidden" name="maxW" value="700" />
    <input type="hidden" name="fullPath" value="images/profilepic/" />
    <input type="hidden" name="relPath" value="../images/profilepic/" />
    <input type="hidden" name="colorR" value="255" />
    <input type="hidden" name="colorG" value="255" />
    <input type="hidden" name="colorB" value="255" />
    <input type="hidden" name="maxH" value="700" />
    <input type="hidden" name="filename" value="filename" />
    <input type="file" id='filename' name="filename" onchange="ajaxUpload(this.form,'js/ajaxuploadprofile.php?filename=name&amp;maxSize=2000000&amp;maxW=700&amp;fullPath=images/profilepic/&amp;relPath=../images/profilepic/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=700','upload_area','File Uploading Please Wait...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;" />
</form>

<script type='text/javascript'>
function uploadphoto()
{
    el = document.getElementById('filename');
    if (el.onclick) 
    {
       el.onclick();
    } 
    else if (el.click) 
    {
       el.click();
    }
//$('#filename').click(); // <-- this also works for me but not my friend
//document.getElementById('filename').click(); // <-- same
}
</script>

更新的解决方案

最近我发现style='display:none'在某些浏览器中会出现一些问题(或者可能是由于浏览器的版本所致)。就我而言，我和我 friend 的 Chrome 版本不同，因此它可以在我的电脑上运行，但不能在我 friend 的电脑上运行。但是，我可以通过替换 style='display:none' 来解决这个问题与 style='visibility:hidden;height:0px' 。现在代码可以在任何电脑上正常运行。

visibility:hidden只是隐藏内容的 View ，它仍然会占用一些空间。因此我添加了height:0px这样它就会有像 display:none 一样的效果.

Answer 1

这可能是浏览器问题。例如，它可能会导致 IE 出现问题。如果您使用 jQuery，您可以执行以下操作:

$('#button').trigger('click');

或者您可以尝试如下:

if( document.createEvent ) {
    var evt = document.createEvent("MouseEvents");  
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
    document.getElementById('button').dispatchEvent(evt);
} else if( document.createEventObject ) { // For IE 8 and below
    var evObj = document.createEventObject();
    document.getElementById('button').fireEvent('onclick', evObj);
}