Question

我有以下按钮（或链接），我正在向它支付亚马逊付款活动。

<a id="AmazonPayButton"></a>

招标如下：

var btn = OffAmazonPayments.Button("AmazonPayButton", "AmAzOnCoDeHerE", {
        type: "PwA", color: "LightGray",
        authorization: function () {
        loginOptions = { scope: "profile payments:widget payments:shipping_address" };
        taxes = "0";
        authRequest = amazon.Login.authorize(loginOptions, "https://SomeIpHere.com/payment.aspx?taxes=" + taxes);

    },
    onError: function (error) {
    }
});

现在使用jQuery我定义了click事件以进行一些验证。

$("#AmazonPayButton").click(function(e){
    if(..) {
        //Allow
    }
    else {
        e.preventDefault();
        return false;
    }
});

我希望在else的情况下，弹出窗口不会打开，但仍然可以，但我怎么能阻止它打开？

Answer 1

这是一个猜测，因为我从未使用过OffAmazonPayments.Button，但是：如果它还在按钮上定义了一个click处理程序，那么你所做的就不会停止那个处理程序从跑步。为此，请确保首先使用jQuery 连接处理程序（在为该链接调用OffAmazonPayments.Button之前），并在处理程序中使用e.stopImmediatePropagation()来停止其他事件处理程序在被叫的链接上。

以下是一个示例 - 当前处理程序的“停止”事件代码不会阻止同一级别的其他处理程序运行：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>stopImmediatePropagation Example</title>
</head>
<body>
  <div id="foo">click me</div>
  <script>
    (function() {
      $("#foo").click(function(e) {
        display("one");
        e.preventDefault();
        return false;
      })
      $("#foo").click(function() {
        display("two");
      })
      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })();
  </script>
</body>
</html>

但是如果我们添加e.stopImmediatePropagation();，则第二个处理程序不再运行：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>stopImmediatePropagation Example</title>
</head>
<body>
  <div id="foo">click me</div>
  <script>
    (function() {
      $("#foo").click(function(e) {
        display("one");
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      })
      $("#foo").click(function() {
        display("two");
      })
      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })();
  </script>
</body>
</html>

附注：如果来自jQuery事件处理程序的return false;，则调用e.preventDefault()是多余的。 jQuery会看到false返回值，并为您调用e.stopPropagation()和e.preventDefault()（但不是e.stopImmediatePropagation()）。

Answer 2

我意识到这是一个老问题，但由于我遇到了同样的问题，并且在这里遇到了这个问题，我认为这个答案可能在将来帮助其他人。

我有同样需要进行一些验证，并可能阻止亚马逊付款按钮提交和创建弹出窗口。事实证明，解决方案实际上非常简单。只需在构建按钮时将验证代码插入其授权功能中。当然，在那里添加你自己的函数引用时，你需要处理范围，但是我把这个练习留给你。

给出原始代码片段，这是一个例子：

var btn = OffAmazonPayments.Button("AmazonPayButton", "AmAzOnCoDeHerE", {
        type: "PwA", color: "LightGray",
        authorization: function () {
//// validation code added here
            if (!validationCheckPasses()) {  // your validation would go here
                return;  // don't allow button to submit if validation failed
            }
////
            loginOptions =
    { scope: "profile payments:widget payments:shipping_address" };
            taxes = "0";
            authRequest = amazon.Login.authorize(loginOptions, "https://SomeIpHere.com/payment.aspx?taxes=" + taxes);

        },

        onError: function (error) {
        }
    });

阻止Amazon Pay按钮打开弹出窗口

2 个答案: