0

マウスをクリックするたびにすべてのボタン オブジェクトのメソッドを呼び出そうとしていますが、javascript プロトタイプがどのように機能するかについてはまったく詳しくありません。助けていただければ幸いです。これが私がこれまでに持っているものです。

var button1 = new button(200, 200, 150, 150, "testFunc();"); 
function button(x,y,width,height, func) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.func = func;

}

button.prototype.click = function(clickx, clicky) {
    eval(this.func)
        console.log("Clicked button at" + this.x + " " + clicky);
        if (clickx > this.x && (clickx + width) < this.x) {
            if (clicky > this.y && (clicky + height) < this.y) {

                this.func(); //Call the button's function
            }
        }   
}

function onClick(x, y) {
    button.prototype.click.call(x, y); 
}

基本的に、クリックのxy座標を使用してクリックされたかどうかをすべてのボタンオブジェクトで確認したいと考えています。確かにこれはjavascriptで可能になるはずですか？

4

2 に答える 2

2

わかりました、いくつかのこと。

  1. コンストラクターは常に大文字で始める必要があります。Buttonありませんbutton。
  2. 関数はオブジェクトであり、何も使用せずにそのまま渡すことができますeval。
  3. ボタンのリストを操作したい場合は、ボタンのリストが必要です。プロトタイプの関数はすべてのインスタンスで共有されますが、プロトタイプからすべてのインスタンスを取得することはできません。そのリストを自分で維持する必要があります。配列はリストに適しています。
// Constructor! capitalized!
function Button(x, y, width, height, func) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.func = func;
}

// Each constructed Button will have a click() method.
Button.prototype.click = function(clickx, clicky) {
    console.log("Clicked button at" + this.x + " " + clicky);
    if (clickx > this.x && (clickx + width) < this.x) {
        if (clicky > this.y && (clicky + height) < this.y) {
            this.func(); //Call the button's function
        }
    }   
}

// Passed as the function to execute in this not very exciting example.
function testFunc() {
    console.log('called testFunc()!')
}

// Make a bunch of buttons, save them in an array.
// Note how we actually pass a function object as the last argument.
// Note how the last argument IS NOT a string.
var buttons = [
  new Button(100, 100, 150, 150, testFunc),
  new Button(250, 250, 150, 150, testFunc),
  new Button(400, 400, 150, 150, testFunc)
];

// called by something else that passes x and y
function onClick(x, y) {
    // tell each button we had a click, and pass in x and y to see
    // if it should handle it.
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        button.click(x, y);
    }
}
于 2012-12-08T00:26:18.187 に答える
0

あなたはdomに対してコーディングしていると思います。

クリックを取得するには、ボタンを dom 要素にする必要があります。DOM 要素はどこに定義されていますか? DOM は、コーディングする必要がある API です。ドキュメントオブジェクトモデルに従っていない場合、ランダムボタンオブジェクトがクリックイベントをリッスンするように魔法をかけることはできません...これはJavaScriptプロトタイプとは関係ありません。

var domElement = document.createElement("DIV")

domElement.onclick = function(event){
 // do some stuffs
  alert("clicked at"+event.pageX+" "+event.pageY);
}

私はあなたのコードを引用します：

var button1 = new button(200, 200, 150, 150, "testFunc();"); 
function button(x,y,width,height, func) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.func = func;

}

button.prototype.click = function(clickx, clicky) {
    eval(this.func)
        console.log("Clicked button at" + this.x + " " + clicky);
        if (clickx > this.x && (clickx + width) < this.x) {
            if (clicky > this.y && (clicky + height) < this.y) {

                this.func(); //Call the button's function
            }
        }   
}

function onClick(x, y) {
    button.prototype.click.call(x, y); 
}
于 2012-12-08T00:34:08.207 に答える