Bootstrap 3：点击按钮不起作用

Question

我正在开发一个使用 AngularJS 和 Twitter Bootstrap 的网络应用程序。我的应用程序在 Firefox 上运行良好，但在 Chrome 或 Chromium（我的操作系统是 Ubuntu）上单击按钮时，无法正确检测到此单击。检测到单击但对象事件为空或未检测到。如您所见，它只写 evento: 而不是 id。在 Firefox 中它正确地写 evento: 和 id。

HTML:

<button id = "removeLeftTables" ng-click = "hmCtrl.changeView($event)">
    <span class="glyphicon glyphicon-remove " aria-hidden="true" style = "vertical-align: middle; font-size: 25px"></span>
</button>

JS:

self.changeView = function(event){
    console.log("evento: " + event.target.id);
    if (event.target.id == "removeLeftTables"){
        self.show_left_tables = false;
        self.style_left_content = "";
        self.style_right_content = "";
        self.style_tables_content = "";     
        self.cleanTabStyles();
    }

    if (event.target.id == "removeRightTables"){
        self.show_right_tables = false;
        self.style_right_content = "";
        self.style_left_content = "";
        self.style_tables_content = ""; 
        self.cleanTabStyles();
    }
}

我已经使用相同的代码制作了这个 plunker 来检查错误并且它有效：https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur

我什么都不懂。为什么它在我的 Web 应用程序中不起作用，而在 plunker 中工作正常？发生什么事了？

编辑 1：我的目标是获取对象的 id，而不是我创建的 clic。使用 Firefox、Chrome 和 Chromium。现在，事件的 id 只能由 Firefox 检索。使用 Chrome 和 Chromium，事件被触发，我无法从对象事件中检索 ID。

编辑 2：我在我的代码中添加了一个跟踪以了解事件变量是否为空，当我点击 Chrome o Chromium 事件变量不为空但未检测到 id!!!

    $scope.changeView = function(event){
    if (event == null)
        console.log("event is NULL");
    else
        console.log("event IS NOT NULL");
    console.log("evento: " + event.target.id);
    if (event.target.id == "removeLeftTables"){
        self.show_left_tables = false;
        self.style_left_content = "";
        self.style_right_content = "";
        self.style_tables_content = "";     
        self.cleanTabStyles();
    }

    if (event.target.id == "removeRightTables"){
        self.show_right_tables = false;
        self.style_right_content = "";
        self.style_left_content = "";
        self.style_tables_content = ""; 
        self.cleanTabStyles();
    }
}

Answer 1

看看固定的fiddle： https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview

在通常情况下，您应该在控制器中使用 $scope.checkClick() 而不是 this.checkClick():

$scope.checkClic = function(obj) {
    console.log("obj: " + obj);
};

并且在 html 中调用方法没有意义，例如 ctrl.methodName()。

你可以这样做：

<button ng-click = "checkClick('Button Clicked!!!')">

仅 services 允许使用此功能。即使在 factories 中你也不应该使用 this （使用 return {a:..., b: function(){...}} 语法。

在控制器或指令中，您应该使用 $scope（或 scope 用于指令）向 html

提供您的方法

Answer 2

您可以尝试 currentTarget 而不是 target。因为 currentTarget 获取其事件侦听器触发特定事件的元素

self.changeView = function(event) {
    console.log("evento: " + event.currentTarget.id);
};

可能对你有帮助

Bootstrap 3：点击按钮不起作用

Boostrap 3: Click over button doesn't work

javascript

angularjs

angularjs-ng-click

ng-controller