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

Question

我正在制作一个有角度的应用程序，但我找到了一个需要使用 jQuery 的实例。我需要单击一个按钮，该按钮会在另一个隐藏按钮上引发单击事件。我知道这看起来很奇怪，但我需要这个功能，因为我正在使用的角度模块 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。任何有关此或替代方法的帮助将不胜感激。提前致谢！

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

score 2 · Accepted Answer

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

有一个注释：

注意： AngularJS 1.3 已经放弃了对 IE8 的支持。在我们的博客上阅读有关它的更多信息。AngularJS 1.2 将继续支持 IE8，但核心团队不打算花时间解决特定于 IE8 或更早版本的问题。

根据您的评论：

网站的所有其他部分都是 100% 有角度的，并且运行良好。正是这种情况，我想不出有角度的解决方案。

然后我想建议你 Angular 中确实有一个精简版的 jQuery，称为jqLite. 您可以使用它，例如：

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

score 0 · Accepted Answer

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

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

#firstClick {
    pointer-events: none;
    }

score 0 · Accepted Answer

将 jquery 版本更改为较低。通过看到这个线程，我认为 1.10.2 版本不支持 ie8。我也在 jsfiddle 中尝试过并在 ie8 中测试存在问题。当我更改以更改它正在工作的版本时Fiddle

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

3 回答 3