2

阅读此问题的答案后

我想知道如何构造一个依赖于用户点击事件的 preventDefault / stopPropagation，例如：

<html>
   <a data-handler="add_to_cart" data-item_id="5">Click</a>
</html>

单击当前元素调用后端（通过 ajax）将项目 5 添加到用户购物车。但是如果我想先注入一个对话框怎么办（仅限javascript）

var template = '' +
    '<div class="dialog">' +
        '<p>Really add this item?</p>' +
        '<button>Yes</button>' +
        '<button>No</button>' +
    '</div>'

$(a).click(function(){
    # open the dialog template
    # if the correct button is clicked continue the default event
});

我不想使用confirmor prompt，我基本上是在寻找一种方法来使用我自己的 html 对话框来实现它们的功能。

4

2 回答 2

0

您有多种选择来完成此操作。我建议的两个方法是覆盖提示方法（有关覆盖和更改外观的信息，请参见此处和此处），或者制作自己的对话框并监视其上的按钮。

覆盖：

function prompt() { 
    //Insert your HTML, show the dialog
}

监控另一次点击：

$('#someOtherButton').click(function(){
    //Do what you want
});

我建议简单地覆盖prompt().

于 2013-04-29T13:38:06.673 回答
0

您可以阻止传播并从对话框中重新调用该click()方法，并请求传播。

var template = '' +
    '<div class="dialog">' +
        '<p>Really add this item?</p>' +
        '<button class=correctbutton>Yes</button>' +
        '<button>No</button>' +
    '</div>'

$(a).click(function(){
    if(window.correctButtonClicked){
     return true;//continue propagation
    }
    window.clickedA=a // store current clicked object
    openDialog() 
    return false; //stop propagation
});

function openDialog(){
 //Make a dialog from the template
 $('.correctbutton').click(function(){
      window.correctButtonClicked=true;
      $(window.clickedA).click(); 
 });

}
于 2013-04-29T13:40:29.813 回答