1

我正在使用 Prototype JavaScript，我有一个按钮，我想使用 Event.observe 方法来观察点击操作。

问题是我想根据 PHP 代码中的 if 语句调用两个函数之一。我对 Javascript 和 Event.observe 方法的理解非常有限，但是在尝试观察不存在的元素时，代码似乎不起作用。我可以让它以一种非常hacky的方式工作，如下所示：

<?php if ($_type == "forward_second"):?>
    <input type="button" id="week_backward_second" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward" value="&lt;&lt;" />
<?php else: ?>
    <input type="button" id="week_backward" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward_second" value="&lt;&lt;" />
<?php endif; ?>

在 JavaScript 中：

initialize: function {    
    Event.observe('week_backward', 'click', this.backward.bind(this));
    Event.observe('week_backward_second', 'click', this.backwardSecond.bind(this));
},

通过拥有一个隐藏字段，“不必要的”Event.observe有一个需要观察的元素并且代码可以工作。

任何人都可以提出更好的方法吗？

4

3 回答 3

2

我希望我理解你的问题:)

var element = $('week_backward'),
    method = this.backward;

// Get a second element if first doesn't exist.
if (!element) {
    element = $('week_backward_second');
    method = this.backwardSecond;
}

element.observe('click', method.bind(this));

我使用了较短的 Prototype API - 除非您与我推荐的其他库没有冲突。

PS。我忘了说现在你只需要打印一个按钮，没有隐藏的按钮。

于 2012-07-14T19:50:06.633 回答
1

  1. 没有隐藏字段。在观察之前检查元素的存在（如 Reinmar 所写）：

    initialize: function {    
    if ($('week_backward')) $('week_backward').observe('click', this.backward.bind(this));
    if ($('week_backward_second')) $('week_backward_second').observe('click', this.backwardSecond.bind(this));
},

  2. 没有隐藏字段。使用事件委托：

    initialize: function {
    document.on('click', '#week_backward', this.backward.bind(this));
    document.on('click', '#week_backward_second', this.backwardSecond.bind(this));
},

    观察者附加到document并接收click从您的元素冒泡的事件（如果存在）。

于 2012-10-04T08:31:32.087 回答
0

另一种处理方法是使用 $$ 并调用。这样，您将遍历一个包含一个元素或没有元素的数组，并在需要时应用该方法。

$$('#week_backward').invoke('observe', 'click', this.backward);
$$('#week_backward_second').invoke('observe', 'click', this.backwardSecond);
于 2014-01-20T21:51:51.587 回答