2

jQuery を使用して奇妙な問題が発生しています。ページに一連のボタンがあり、長押しすると、ボタンの場所に入力ボックスがポップアップします。これがフィドルです。

HTML

<div class="popupView" id="recoveryView">
    <button class="intervalBtn" type="button" name="recovery0" id="recovery0">00:30</button>
    <button class="intervalBtn" type="button" name="recovery6" id="recovery6">00:35</button>
    <button class="intervalBtn" type="button" name="recovery1" id="recovery1">02:00</button>
    <button class="intervalBtn" type="button" name="recovery7" id="recovery7">03:00</button>
    <button class="intervalBtn" type="button" name="recovery2" id="recovery2">04:00</button>
    <button class="intervalBtn" type="button" name="recovery8" id="recovery8">05:00</button>
</div>
<input id="edit_interval" type="text" />

CSS

.popupView {
    background: #999999;
    -webkit-border-radius: 6px;
    -webkit-box-shadow: 0 0 4px #333333;
    width: 30%;
    height: 70%;
    position: absolute;
}
.intervalBtn {
    color: blue;
    background: #CCCCCC;
    -webkit-border-radius: 6px;
    width: 41%;
    height: 12.5%;
    float: left;
    margin-left: 6%;
    margin-top: 3%;
    font: 12pt sans-serif;
}
.recoveryBtn {
    color: blue;
    background: #CCCCCC;
    -webkit-border-radius: 6px;
    width: 88%;
    height: 12.5%;
    float: left;
    margin-left: 6%;
    margin-top: 3%;
    font: 12pt sans-serif;
}
.intervalBtn.selected, .recoveryBtn.selected {
    color: #CCCCCC;
    background: blue;
}
body {
    position:absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body > div {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#edit_interval {
    display: none;
    position: absolute;
}

JavaScript

$(".intervalBtn").click(function () {
    $(".intervalBtn").removeClass("selected");
    $(this).addClass('selected');
}).mouseup(function () {
    clearTimeout(pressTimer);
    return false;
}).mousedown(function () {
    // Set timeout
    pressTimer = window.setTimeout(function () {
        console.log("interval button long click");

        $("#edit_interval").css("display", "block").css("left", $(this).position().left).css("top", $(this).position().top);
    }, 1000)
    return false;
});

フィドルで実行する場合、唯一の問題はボックスの場所です (左と上の位置が間違っているのでしょうか?)、しかし、実際の Web アプリ (Safari で) でテストすると、長い時間が経過した後に次のエラーが表示されます。ログをクリックすると、入力ボックスが表示されません。

TypeError: 'undefined' は 'in' の有効な引数ではありません ('t in e' を評価しています)

で

jQuery.min.js: 5

したがって、これは 2 部構成の質問です (パート 1 に重点を置いて)。

  1. このエラーが発生するのはなぜですか (これはバグですか?)、どうすれば修正できますか?
  2. 入力ボックスを正しい位置に設定するにはどうすればよいですか?

編集

コメントで示唆されているように、私は に交換しましたjquery.min.jsがjquery.js、デバッグしやすいエラーがあります:

TypeError: 'undefined' は 'in' の有効な引数ではありません ('name in style' を評価しています)

6643行目。 からのコードは次のjQuery.jsとおりです。

// return a css property mapped to a potentially vendor prefixed property
function vendorPropName( style, name ) {

    // shortcut for names that are not vendor prefixed
    if ( name in style ) {   //<---This is the line that causes the error
        return name;
    }

    // check for vendor prefixed names
    var capName = name.charAt(0).toUpperCase() + name.slice(1),
        origName = name,
        i = cssPrefixes.length;

    while ( i-- ) {
        name = cssPrefixes[ i ] + capName;
        if ( name in style ) {
            return name;
        }
    }

    return origName;
}

これは、jQuery が CSS プロパティleftとtopを見つけられないということですか?

4

1 に答える 1

2

質問のパート 2 については、関数内にスコープが設定されているため、期待どおりでthisはありません。のスコープ外への参照 (またはクリックされた要素の位置のみ)を取得する必要があります。関連するコードは以下です。ここであなたのフィドルを更新しました。position関数はマージンやパディングを考慮していないことに注意してください。thiswindow.setTimeout()thissetTimeout()

var pos = $(this).position();

// Set timeout
pressTimer = window.setTimeout(function() 
{ 
    console.log("interval button long click");

    $("#edit_interval").css({"left": pos.left + 'px', "top": pos.top + 'px'}).show();
},1000)
return false;
于 2013-04-17T19:35:40.453 に答える