卡西卡的小寶庫
寶庫寶庫寶庫
Showing posts with label IE_Firefox_相容. Show all posts
Showing posts with label IE_Firefox_相容. Show all posts

[JS]取消事件

Posted In: , . By 卡西卡

重點:

  • Firefox沒有window.event的物件,必須透過addEventListener才能把event當成參數傳入function中。

可共用:

IE可用:

Firefox可用:

[SCRIPT]
window.onload = function() {
  addEvent(document.getElementById("form1"), "submit", checkForm);
}

function checkForm(e) {
  var obj = null;
  if ( e.srcElement ) {
    obj = e.srcElement;
  } // if
  else if ( e.target ) {
    obj = e.target;
  } // else if

  // 取消submit
  cancelEvent(e);
}

function cancelEvent(e)
{
  if ( e && e.preventDefault ) {
    // Firefox
    e.preventDefault();
    e.stopPropagation();
  } // if
  else {
    // IE
    e.cancelBubble=true;
    e.returnValue = false;
  } // else
  return false;
}

function addEvent(obj, evType, fn)
{
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, false);
    return true;
  } // if
  else if (obj.attachEvent) {
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } // else if
  else {
    return false;
  } // else
}
[/SCRIPT]
另一種方法: [SCRIPT]
function fnTest(evt) {
  evt=evt?evt:(window.event?window.event:null);
  printObject(evt);
}
function printHTML(str) {
  var div = document.getElementById('divMsg');
  div.innerHTML = str;
}
function printObject(obj) {
  var s = "";
  for(att in obj) s += ("<li>"+att+"="+obj[att]+"</li>");
  printHTML("<ol>"+s+"</ol>");
}
[/SCRIPT]
[BODY]
<input type="button" id="btnSave" value="TEST" onclick="fnTest(event);"/>
<div id="divMsg">divMsg</div>
[/BODY]

參考資料:

 

可共用:

  • obj.innerHTML

IE可用:

  • outerHTML
  • innerText

Firefox可用:

  • textContent
[SCRIPT]
function print(str) {
  var div = document.getElementById('divMsg');
  if ( div.innerText ) {
    // IE
    div.innerText = str;
  } // if
  else {
    // FireFox
    div.textContent = str;
  } // else
}
function printHTML(str) {
  var div = document.getElementById('divMsg');
  div.innerHTML = str;
}
[/SCRIPT]

 

[JS]getAttribute

Posted In: , . By 卡西卡

可共用:

IE可用:

  • obj.msg, obj['msg']
[SCRIPT]
function fnTest() {
  var obj = document.getElementById('txtStr');
  var msg = obj.getAttribute("msg");
  print(obj.id+'='+obj.value+','+msg );
}
[/SCRIPT]

[BODY]
<form>
<input type="text" id="txtStr" value="123-Abc" msg="測試" />
<input type="button" id="btnSave" value="TEST" onclick="fnTest();"/>
<br />
<div id="divMsg">divMsg</div>
</form>
[/BODY]

 

CSS相容

Posted In: , . By 卡西卡

#example1 {
color:#FF0000; /*For Firefox*/
*color:#00FF00; /*For IE7 & IE6*/
_color:#0000FF; /*For IE6*/
/*注意順序*/
}

示範


#example { color: #FF0000; } /* Firefox */
*html #example { color: #00FF00; } /* IE7 & IE6 */
*+html #example { color: #0000FF; } /* IE6 */

示範


參考:http://www.arcbox.cn/zblog/post/36.html