Question

我正在使用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有一个要观察的元素，代码可以工作。

有人能建议更好的方法吗？

由于

Answer 1

我希望我理解你的问题：）

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 - 除非你没有与其他libs冲突，我推荐它。

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

Answer 2

没有隐藏的字段。在观察之前检查元素的存在（正如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));
},

没有隐藏的字段。使用event delegation：

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

观察者已附加到document，并会从您的元素中冒出click个事件。

Answer 3

处理此问题的另一种方法是使用$$和invoke。这样你就可以迭代一个或没有元素的数组，并在需要时应用该方法。

$$('#week_backward').invoke('observe', 'click', this.backward);
$$('#week_backward_second').invoke('observe', 'click', this.backwardSecond);

原型JavaScript Event.observe - 如何观察可能存在或不存在的元素

3 个答案: