Javascript 如何在blockly'；什么街区？

我正在分块工作，我有一个场景，我有一个有图像的块，我想点击该图像并触发一个事件。我不知道该怎么做。我试过blcokly的文档，但没有提到。它们只在整个块上提供onchange事件，而图像将只是该块的一部分

你知道我怎样才能做到这一点吗

---

提前感谢。

我有了扩展field_image.js文件的想法，我继承了必要的文件，并且在init函数中，我在SVG元素中添加了一个eventlistenr。这就是我如何使图像可点击。下面是代码-

MyFieldImage.prototype = new Blockly.FieldImage();
MyFieldImage.prototype.constructor = MyFieldImage;
function MyFieldImage(src, width, height, opt_alt,isClickListener){
    this.clickEventListener  = isClickListener;
    this.sourceBlock_ = null;
  // Ensure height and width are numbers.  Strings are bad at math.
  this.height_ = Number(height);
  this.width_ = Number(width);
  this.size_ = new goog.math.Size(this.width_,
      this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);
  this.text_ = opt_alt || '';
  this.setValue(src);
}

MyFieldImage.prototype.init = function(block) {
  if (this.sourceBlock_) {
    // Image has already been initialized once.
    return;
  }
  this.sourceBlock_ = block;
  // Build the DOM.
  /** @type {SVGElement} */
  this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
  if (!this.visible_) {
    this.fieldGroup_.style.display = 'none';
  }
  /** @type {SVGElement} */
  this.imageElement_ = Blockly.createSvgElement('image',
      {'height': this.height_ + 'px',
       'width': this.width_ + 'px'}, this.fieldGroup_);
  this.setValue(this.src_);
  if (goog.userAgent.GECKO) {
    /**
     * Due to a Firefox bug which eats mouse events on image elements,
     * a transparent rectangle needs to be placed on top of the image.
     * @type {SVGElement}
     */
    this.rectElement_ = Blockly.createSvgElement('rect',
        {'height': this.height_ + 'px',
         'width': this.width_ + 'px',
         'fill-opacity': 0}, this.fieldGroup_);
  }
  block.getSvgRoot().appendChild(this.fieldGroup_);

  // Configure the field to be transparent with respect to tooltips.
  var topElement = this.rectElement_ || this.imageElement_;
  topElement.tooltip = this.sourceBlock_;
  Blockly.Tooltip.bindMouseEvents(topElement);
  if(this.clickEventListener){
    this.imageElement_.addEventListener("click", callingClick); 
  }

};

在此之后，您必须在块中添加myFieldImage，而不是使用fieldImage。isClickListener参数将从块中传递。以下为守则-

Blockly.Blocks['MyBlock'] = {
          init: function() {

            this.appendDummyInput()
                .appendField(new MyFieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*",true));
            this.setTooltip('');
            this.setHelpUrl('http://www.example.com/');
          }
        };

---

我有一个扩展field_image.js文件的想法，我继承了必要的文件，在init函数中，我在SVG元素中添加了一个eventlistenr。这就是我如何使图像可点击。下面是代码-

MyFieldImage.prototype = new Blockly.FieldImage();
MyFieldImage.prototype.constructor = MyFieldImage;
function MyFieldImage(src, width, height, opt_alt,isClickListener){
    this.clickEventListener  = isClickListener;
    this.sourceBlock_ = null;
  // Ensure height and width are numbers.  Strings are bad at math.
  this.height_ = Number(height);
  this.width_ = Number(width);
  this.size_ = new goog.math.Size(this.width_,
      this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);
  this.text_ = opt_alt || '';
  this.setValue(src);
}

MyFieldImage.prototype.init = function(block) {
  if (this.sourceBlock_) {
    // Image has already been initialized once.
    return;
  }
  this.sourceBlock_ = block;
  // Build the DOM.
  /** @type {SVGElement} */
  this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
  if (!this.visible_) {
    this.fieldGroup_.style.display = 'none';
  }
  /** @type {SVGElement} */
  this.imageElement_ = Blockly.createSvgElement('image',
      {'height': this.height_ + 'px',
       'width': this.width_ + 'px'}, this.fieldGroup_);
  this.setValue(this.src_);
  if (goog.userAgent.GECKO) {
    /**
     * Due to a Firefox bug which eats mouse events on image elements,
     * a transparent rectangle needs to be placed on top of the image.
     * @type {SVGElement}
     */
    this.rectElement_ = Blockly.createSvgElement('rect',
        {'height': this.height_ + 'px',
         'width': this.width_ + 'px',
         'fill-opacity': 0}, this.fieldGroup_);
  }
  block.getSvgRoot().appendChild(this.fieldGroup_);

  // Configure the field to be transparent with respect to tooltips.
  var topElement = this.rectElement_ || this.imageElement_;
  topElement.tooltip = this.sourceBlock_;
  Blockly.Tooltip.bindMouseEvents(topElement);
  if(this.clickEventListener){
    this.imageElement_.addEventListener("click", callingClick); 
  }

};

在此之后，您必须在块中添加myFieldImage，而不是使用fieldImage。isClickListener参数将从块中传递。以下为守则-

Blockly.Blocks['MyBlock'] = {
          init: function() {

            this.appendDummyInput()
                .appendField(new MyFieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*",true));
            this.setTooltip('');
            this.setHelpUrl('http://www.example.com/');
          }
        };

---

您的blockly元素上有任何类/id吗？我没有手动分配任何类/id，但blockly正在分配idinternally@ReedSpool不，我放弃了这个想法，因为当时我什么都没有得到。但现在我又开始做同样的事情了。我会报告我是否会得到任何东西。是的，图像在块内，好消息是我找到了一种方法使其可点击，我从块中插入了“field_image.js”文件，在init函数中我添加了click事件，这对我来说很好。@ReedSpool我已经发布了答案，请看一看。谢谢你的链接，幸运的是我已经知道了。你的blockly元素上有任何class/id吗？我没有手动分配，但是blockly正在分配idinternally@ReedSpool不，我放弃了这个想法，因为当时我什么都没有得到。但现在我又开始做同样的事情了。我会报告我是否会得到任何东西。是的，图像在块内，好消息是我找到了一种方法使其可点击，我从块中插入了“field_image.js”文件，在init函数中我添加了click事件，这对我来说很好。@ReedSpool我已经发布了答案，请看一看。谢谢你的链接，幸运的是我已经知道了。