在 IE8 中不工作的元素上触发点击事件

Question

我正在制作一个 angular 应用程序，但我发现了一个需要使用 jQuery 的实例。我需要单击一个按钮，该按钮会在另一个隐藏按钮上引发单击事件。我知道这看起来很奇怪，但我需要此功能，因为我正在使用的 angular 模块 ng-file-upload 不适用于样式化图标。

我的解决方案是创建两个按钮，一个隐藏，一个透明。然后我将样式图标放在透明按钮上并隐藏另一个按钮。然后我使用 jQuery 使第二个按钮在单击第一个按钮时被单击。这在现代 firefox/chrome 中工作正常，但在 IE8 中根本行不通。

<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>

$(document).on('click', '#firstClick', function() {
    $('#secondClick').trigger('click');
});

我目前使用的是 jQuery 版本 1.10.2。对此或实现此目标的其他方法的任何帮助将不胜感激。提前致谢！

更新：我认为问题可能与 angular-file-select 有关，因为 secondClick 现在正在触发。但是 angular-file-select 不是。此外，我将 secondClick 设置为可见，当我直接单击它时，它会触发 ng-file-select.

Answer 1

因为您没有提到您的应用程序正在使用 angular 版本。但是如果你使用的是 angular 1.3.x 那么你必须知道它不再支持 IE8 浏览器了。

docs for IE guide.

有备注：

Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.

根据您的评论：

网站的每个其他部分都是 100% angular，并且工作完美。正是这种情况，我想不出 angular 解决方案。

那我想建议你angular里面确实有jQuery的精简版，叫做jqLite。您可以使用它，例如：

angular.element('#firstClick').on('click', function() {
    angular.element('#secondClick').trigger('click');
});

Docs for angular.element

Answer 2

编辑：您可以使用具有良好浏览器支持的元素转发鼠标事件：http://www.vinylfox.com/forwarding-mouse-events-through-layers/

如果您足够幸运，不必使用旧版浏览器，那么您可以摆脱指针事件 CSS 属性.

#firstClick {
    pointer-events: none;
    }

Answer 3

将 jquery 版本更改为较低版本。通过查看 this thread i think version 1.10.2 is not support for ie8. i also tried in jsfiddle and test in ie8 there isissues. when i change to change the version it's working Fiddle

$('#secondClick').click();

在 IE8 中不工作的元素上触发点击事件

Triggering click event on an element not working in IE8

javascript

jquery

html

angularjs

angular-file-upload