0

我正在尝试像弹出窗口一样打开一个 div，但是当它触发 onclick 事件时，它以鼠标所在的位置为中心。为了获得鼠标位置，我一直在关注这个例子

http://docs.jquery.com/Tutorials:Mouse_Position

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

在该示例中，单击功能设置为客户端。但是，在我的场景中，我将在服务器端将 onclick 函数设置为许多动态创建的对象。我还将向我的函数添加一个参数，该参数对于创建的每个对象都是唯一的。

我面临的问题是，当我设置不使用 JQuery 的 onclick 事件时，我似乎无法获得 eventargs（“e”）。

最终，我试图实现的简化示例如下所示：

<div id="divSubscription" style="display: none; height: 0px; width: 0px; position: absolute;">some content</div>     
<input type="button" id="btnOpenPopup" value="Open" onclick='openPopup(8, e)' />

    function openPopup(subID, e) {
        var x = e.pageX;
        var y = e.pageY;
        $("#divSubscription").css("top", y);
        $("#divSubscription").css("left", x);
        $("#divSubscription").css("display", "block");
        $("#divSubscription").animate({ height: "400px", width: "400px" }, 300, "swing");

        $("#divSubscriptionContent").html(subID);
    }

显然，这是行不通的，因为它不知道“e”是什么。有什么办法可以完成我想做的事情吗？

4

3 回答 3

1

使用类名而不是 ids 和 data-id 属性来存储按钮特定的数据（即 subID）：

CSS：

jQuery(document).ready(function(){
   $(".special").click(function(e){
      var subID = $(this).attr('data-id'); 
      $("#divSubscriptionContent").html(subID);
   }); 
})

HTML：

<div id="divSubscription">some content</div>
<input class="special" data-id="8" type="button" id="btnOpenPopup" value="Open" />
于 2013-03-07T23:09:47.487 回答
-1

尝试使用委托事件，其中 #BUTTON_ANCESTOR 是包含您的按钮的元素：

 jQuery(document).ready(function(){
      $("#BUTTON_ANCESTOR").on('click', 'input[type=button]', (function(e){
           $('#status2').html(e.pageX +', '+ e.pageY);
      }); 
 })
于 2013-03-07T23:09:39.363 回答
-1

就个人而言，我认为您应该删除 onclick 并使用 jquery 或一些类似的框架来附加点击处理程序并监听事件。

简单地说，使用 jQuery

$('#btnOpenPopup').bind('click', {foo:bar}, openPopup(e));

在您的引导程序或初始化过程中执行此操作，并摆脱将 javascript 放入 html 文件的习惯。恕我直言，您应该只需要包含一个脚本。

于 2013-03-07T23:14:36.240 回答