Question

我试图找到一种方法来轻松禁用/启用dat.gui中的按钮。

我设置了dat.gui来控制动画。当动画结束时，我希望“播放”按钮被禁用。我尝试将“禁用”属性添加到按钮的DOM元素中，但在设置此属性后单击按钮时，我仍然看到相应的函数触发。

我目前的方法如下：

找到与dat.gui界面中的按钮对应的li元素
创建一个半透明且黑色的新DOM元素，并将其添加到li元素中以使按钮的内容变灰。
在绑定到此按钮的函数中，检查按钮中是否存在此“禁用”DOM元素，如果存在，则不要执行其余功能。

这是一个hack，我很想知道是否有一些方法可以禁用内置于dat.gui中的按钮，或者是一些我不知道的更好的方法。

Answer 1

在dat.GUI中，FunctionController类负责按钮。如果你看一下its source code，那里就没有条件逻辑。控制器将监听按钮上的click事件，它将始终在点击时调用该功能。这意味着您在这里无法从库中获得任何帮助 - 您需要检查处理程序是否禁用该按钮。这些方面的东西：

// Find the GUI controller listening to given property on given object
function getController(gui, object, property)
{
  for (var i = 0; i < gui.__controllers.length; i++)
  {
    var controller = gui.__controllers[i];
    if (controller.object == object && controller.property == property)
      return controller;
  }
  return null;
}

...

object.button = function()
{
  // Don't do anything if the button is disabled
  if (getController(gui, this, "button").domElement.hasAttribute("disabled"))
    return;

  alert("Button clicked");
};
gui.add(object, "button");

...

// Disable button
getController(gui, object, "button").domElement.setAttribute("disabled", "");

请注意，dom.GUI中的禁用元素没有特殊样式，您必须为此添加自己的样式。鉴于您在按钮的情况下看到的是属性标签而不是实际按钮，这不是非常简单 - 我认为您必须将disabled属性放在{{1}上而不是controller.domElement.parentNode。然后你应该可以使用选择器controller.domElement作为你的风格。

修改：您可以通过扩展[disabled] > .property-name以更通用的方式实现此目的：

FunctionController

这将向控制器添加一个属性function blockEvent(event) { event.stopPropagation(); } Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", { get: function() { return this.domElement.hasAttribute("disabled"); }, set: function(value) { if (value) { this.domElement.setAttribute("disabled", "disabled"); this.domElement.addEventListener("click", blockEvent, true); } else { this.domElement.removeAttribute("disabled"); this.domElement.removeEventListener("click", blockEvent, true); } }, enumerable: true });，该属性将捕获disabled个事件，以便不触发按钮处理程序。禁用按钮会变得更简单：

click

按钮处理程序可以保持不变，只是因为禁用按钮而无法触发。

在dat.gui中禁用按钮的方法？

1 个答案: