23587


現在、monacaでタグでonclickを使用して遷移したい考えております。  
onclickはタグで遷移させようとすると動作をしないことがわかりました.  
return falseを付け加えることで遷移させずに、onclickは起動しております。  
自分の作成したい内容はonclickが動いて違うページに遷移させたいのでが、  
こうするためにはどのようなプログラムにすればよろしいですか？  
以下にプログラム内容を載せます

ご教授よろしくお願いします。

onclick.js

[code]

    function onRegisterBtn(id){
        ncmb.Installation.fetchById(id).then(function(installation){
            var seibetu = $("#reg_seibetu option:selected").val();                      
            installation.set("seibetu", seibetu);
            return installation.update();
        })
        .then(function(installation){
               alert('登録完了しました');
        })
        .catch(function(err){
               alert('登録完了できませんでした');
        });
    }
    
[/code]

index.html

[code]

    <p>年齢<br>
        <select id="reg_nenrei">
            <option value="10">10代</option>
            <option value="20">20代</option>
            <option value="30">30代</option>
            <option value="40">40代</option>
            <option value="50">50代</option>
            <option value="60">60代</option>
            <option value="その他">その他</option>
        </select>
    </p>  
    <a href="index.html" onclick="onRegisterBtn('id')">登録する</a>
    
[/code]


CC BY-SA 3.0
2016-03-26T15:19:05.017
23494
2016-03-29T05:25:28.603
2016-03-27T13:49:02.917
13367
13367
question
javascript monaca html
onclickを使用して遷移したい


### onClick属性のイベントハンドラでデフォルト動作を抑止する

リンクがクリックされた時には、ブラウザのデフォルト動作として自動で遷移が行なわれます。  
これを防ぐにはonClick属性の場合、返り値に`false`を指定します。

[code]

    <a href="index.html" onclick="onRegisterBtn('id'); return false;">登録する</a>
    
[/code]

### addEventListener等で登録したイベントハンドラでデフォルト動作を抑止する

Cordova・Monacaでは通常onClick属性などは使わず、JavaScriptは別ファイルにして`addEventListener`などを使うと思います。

[code]

    <a id="regist" href="index.html" >登録する</a>
    
[/code]

この場合イベントハンドラへは引数でイベントオブジェクトが渡されます。このイベントオブジェクトの`preventDefault`メソッドを呼び出すとデフォルト動作が抑止出来ます。

[code]

    document.getElementById("regist").addEventListener("click", function(event){
        event.preventDefault();
        onRegisterBtn('id');
    }, false);
    
[/code]

(質問の例の`onRegisterBtn`はイベントオブジェクトを受け取るように出来ていません。よって上記のコードではイベントハンドラに無名関数を指定し、その無名関数から`onRegisterBtn`を呼ぶようにしています)

### JavaScriptで遷移する

ブラウザのデフォルト動作を抑止すると、リンクをクリックしてもイベントハンドラが実行された後に何も起こりません。  
JavaScriptで遷移させる必要があります。`location.assign`を使います。

[code]

    alert('登録完了しました');
    location.assign("index.html");
    
[/code]

### 現URLの履歴を消して遷移させる（置き換える）

ユーザーに遷移を意識させたくなかったり、現在のURLが遷移後は無効になるような場合は`location.replace`を使い現URLに戻れなくします。

[code]

    alert('登録完了しました');
    location.replace("index.html");
    
[/code]


CC BY-SA 3.0
2016-03-29T05:25:28.603
23587
2016-03-29T05:25:28.603
3054
23494
answer